@Aleksey100

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

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

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

Например:
<div class='elem'></div>
.elem {
    width: 100px;
     height: 100px;
     background: yellow;
}
.elem:hover {
     background: blue;
}


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

PS: Нужен именно тот ховер который указан в css. Без jquery
PPS: Доступа к css нет, я не могу добавлять туда свои дополнительные классы
  • Вопрос задан
  • 34991 просмотр
Решения вопроса 1
lazyday
@lazyday
hover эмулировать нельзя, поскольку это состояние курсора над элементом, а доступ к позиции курсора только для чтения.
Но Вы можете добавить элементу стиль:

domElement.style.backgroundColor="#0f0"
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
kshshe
@kshshe
Frontend developer
.elem {
    width: 100px;
    height: 100px;
    background: yellow;
}
.elem:hover,
.elem.hover {
    background: blue;
}


document.querySelector('.elem').classList.add('hover');
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Как на js вызвать hover?

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

css:
.imBlueDaRuDiRuDuDai {
background: blue;
}


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


В js нет события hover, оно есть в css. В js есть mouseover и mouseout
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Даже есть вы не можете редактировать оригинальный 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');


Разумеется, это сломается, когда изменятся оригинальные стили и нужно будет обновить код в соответствии с ними.
Ответ написан
@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;
});
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы