Как можно убрать :hover у элемента через javascript?
2 ответа
@jakayla
Чтобы убрать :hover состояние с элемента через JavaScript, вы можете использовать JavaScript для добавления и удаления класса с hover стилями.
HTML:
1
|
<div id="myElement" class="myClass">Пример элемента</div> |
CSS:
1 2 3 4 5 6 7 |
.myClass {
/* стили элемента */
}
.myClass:hover {
/* стили hover */
}
|
JavaScript:
1 2 3 4 5 6 7 |
var element = document.getElementById("myElement");
// Удаление :hover состояния
element.classList.remove("myClass");
// Добавление :hover состояния
element.classList.add("myClass");
|
Примечание: Если у вас есть другие стили, которые могут быть применены через :hover, вы также должны удалить или добавить эти стили к элементу, а не только класс с hover стилями.
@jakayla
Если вы хотите убрать :hover состояние с элемента временно (например, при клике на него или при определенном событии), вы можете использовать JavaScript для добавления и удаления стилей напрямую:
HTML:
1
|
<div id="myElement" class="myClass">Пример элемента</div> |
CSS:
1 2 3 4 5 6 7 |
.myClass {
/* стили элемента */
}
.myClass:hover {
/* стили hover */
}
|
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var element = document.getElementById("myElement");
// Удаление :hover состояния при клике на элемент
element.addEventListener("click", function() {
element.style.removeProperty("background-color");
element.style.removeProperty("color");
});
// Добавление :hover состояния при уходе курсора с элемента
element.addEventListener("mouseleave", function() {
element.style.backgroundColor = "initial";
element.style.color = "initial";
});
|
В данном примере, при клике на элемент myElement, из него будут удалены стили для background-color и color, чтобы убрать состояние :hover. При уходе курсора с элемента, стили будут восстановлены на изначальное значение.