Как на js вызвать hover?

Question

[Aleksey100]

Здравствуйте всем.

У меня такой вопрос. Как можно через нативный js вызвать ховер у элемента который прописан в css?

Например:
<div class='elem'></div>

.elem {
    width: 100px;
     height: 100px;
     background: yellow;
}
.elem:hover {
     background: blue;
}

Как я могу через js имитировать hover на этот элемент что бы он стал синим, не наводя на него курсор при этом?

PS: Нужен именно тот ховер который указан в css. Без jquery
PPS: Доступа к css нет, я не могу добавлять туда свои дополнительные классы

Answer 1

[Алексей Уколов]

Даже есть вы не можете редактировать оригинальный css, вы всегда можете добавить свой:

var css = '.elem-hover { background: blue; }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

document.querySelector('.elem').classList.add('elem-hover');

Разумеется, это сломается, когда изменятся оригинальные стили и нужно будет обновить код в соответствии с ними.

Comments

[Aleksey100]

Хороший вариант. Только сначала как то придется узнать какой :hover был указан в css. Мой скрипт будет работать на сторонних сайтах и не будет возможности заранее посмотреть ховеры и прописать их в скрипте.

Хотя если бы была возможность получить :hover из css, вроде такого documentElement.style, то вариант сработал бы

Answer 2

[lazyday]

hover эмулировать нельзя, поскольку это состояние курсора над элементом, а доступ к позиции курсора только для чтения.
Но Вы можете добавить элементу стиль:

domElement.style.backgroundColor="#0f0"

Comments

[VOR_V_ZAKONE]

а как поменять в полузнке цвет ?

Answer 3

[BlueStinger]

Я не прям знаток JS и думаю старожилы реализуют лучше, но это работает :)

let hover = document.querySelectorAll(".hoverJS");
let currentColor;
for(let i = 0; i < hover.length; i++){
hover[i].addEventListener("mouseover", function(){
	currentColor = this.style.backgroundColor; //Сохраняю текущий цвет элемента, чтобы после ухода курсора с элемента, можно было вернуть его исходный цвет.
	this.style.backgroundColor = "aquamarine";
});
hover[i].addEventListener("mouseout", function(){
	this.style.backgroundColor = currentColor;
});
}

Answer 4

[Алексей Лауд]

.elem {
    width: 100px;
    height: 100px;
    background: yellow;
}
.elem:hover,
.elem.hover {
    background: blue;
}

document.querySelector('.elem').classList.add('hover');

Comments

[Aleksey100]

Забыл уточнить что у меня нет доступа к css. Я не могу добавлять туда свои дополнительные классы

[Алексей Лауд]

Aleksey100, тогда остается только отказаться от этой идеи, потому что заставить браузер показать css hover состояние из js нельзя

[Алексей Лауд]

Aleksey100, если только стили не инлайновые, тогда можно из js их отредактировать

[Алексей Лауд]

Aleksey100, а, есть еще вариант. Подключить service worker, в нем ловить запрос за стилями, подменять результат, меняя в нем стили.

[Алексей Лауд]

Подключить service worker, в нем ловить запрос за стилями, подменять результат, меняя в нем стили.

Но проще будет договориться с теми, кто не дает менять css и поменять его.

[Aleksey100]

Алексей Казаков, к сожалению договориться не получится. Делаю виджет который будет скриптом подключатся к сайтам и в теории он на них должен имитировать ховер, так что ему придется работать с тем css который есть. )

[Алексей Лауд]

Aleksey100, тогда можно и правда добавить воркер, смотреть все запросы, если это css, менять ответ сервера, заменяя все selector:hover на selector:hover, selector.hover и дальше работать с js.

[Алексей Лауд]

Но по производительности это может быть не лучший вариант. Возможно, стоит посмотреть в сторону отказа от имитации hover и выбрать для этого что-то другое, например, добавлять свои стили.

[Aleksey100]

Алексей Казаков, дело в том что мне нужны точно такие же ховеры как были прописаны в css. Я бы мог добавлять стили ховера скриптами, но в таком случае сначала их придется каким то образом получить из css

[Алексей Лауд]

Aleksey100, если это точно нужно, то мне приходит в голову только вариант с Service Worker.

Внутри воркера

this.addEventListener('fetch', function(event) {
  // Тут вам надо будет понять, что это запрос за css, выполнить его, поменять стили для работы из js и отдать их странице
  event.respondWith();
});

Но это не будет работать с css in js и с инлайн-стилями. Но можно добавить еще и обработку содержимого тегов style, причем надо будет следить за их изменениями.

Answer 5

[Максим Тимофеев]

Как на js вызвать hover?

Надо написать заклинание и вызвать ховер, дождь и т.д. А если серьезно, то надо поступить так:

css:

.imBlueDaRuDiRuDuDai {
background: blue;
}

js:

$('#someMyElement').toggleClass('imBlueDaRuDiRuDuDai');

В js нет события hover, оно есть в css. В js есть mouseover и mouseout

Comments

[Aleksey100]

Спасибо за ответ. Но я забыл уточнить что у меня нет доступа к css и не могу дописывать свои дополнительные классы.

Отредактировал вопрос

[Николай Шабалин]

Я почти согласен с ответом и готов возвражать, с аргументами конечно же.
ну какое `imBlueDaRuDiRuDuDai`? `imBlueDaBuDiDaBuDai`

в целом поржал от такого нейминга xD Спасибо! =)

[ProjectSoft]

Aleksey100, внедрите css в тело страницы через js.

var st = document.createElement('style'),
	tn = document.createTextNode(`
.elem:hover,
.elem.hover {
	background: blue;
}
`);
document.getElementsByTagName('head')[0].appendChild(st);
st.appendChild(tn);

К JS то доступ есть.

[Aleksey100]

ProjectSoft, я заранее не знаю какой будет ховер у элемента.

Если бы была возможность как то получить его из css, то тогда такой вариант сработал бы.

[Максим Тимофеев]

Aleksey100, Вы делаете дичь какую-то видимо. Распишите подробно саму задачу. Может Вы идете не тем путем. Ибо так как Вы задумали не получится.

[Максим Тимофеев]

Николай Шабалин,

Я почти согласен с ответом и готов возвражать, с аргументами конечно же.
ну какое `imBlueDaRuDiRuDuDai`? `imBlueDaBuDiDaBuDai`

Согласен Ваш вариант лучше. Это методология "Eiffel65", новый конкурент БЭМ

[ProjectSoft]

Aleksey100,
Попробовать достать

var i, j, sel = /a:hover/;
for(i = 0; i < document.styleSheets.length; ++i){
	try{
		var rules = document.styleSheets[i].cssRules;
		for(j = 0; j < rules.length; ++j){
			if(sel.test(rules[j].selectorText)){
				console.log( rules[j].selectorText, rules[j].style.cssText);
			}
		}
	}catch(e){
		console.log('Error ', i);
	}
}

Не сработает, если css загружен с другого домена.
Но, если это браузерное расширение, то всё сработает.
Мы же не знаем, что за виджет, поэтому и нюансов много.
К примеру. Вы определили элемент. Но как вы узнаете, что именно на элемент прописаны стили hover? Ведь они могут быть прописаны на много выше. Например на прародителе.