Как можно убрать :hover у элемента через js или css?

@brook 

Чтобы убрать :hover у элемента через JavaScript, можно использовать методы addEventListener и classList.remove.

Пример:

1
2
3
4
5
6
7
8
9

const element = document.querySelector('.my-element');

element.addEventListener('mouseenter', () => {
  element.classList.remove('hover');
});

element.addEventListener('mouseleave', () => {
  element.classList.add('hover');
});

Таким образом, когда курсор мыши наводится на элемент с классом "my-element", класс "hover" будет удален для этого элемента, а когда мышь убирается с элемента, класс "hover" будет добавлен обратно.

Чтобы убрать :hover у элемента через CSS, можно использовать свойство pointer-events.

Пример:

1
2
3

.my-element {
  pointer-events: none;
}

Свойство pointer-events: none; делает элемент недоступным для событий мыши, включая :hover.

@brook 

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

1
2
3
4
5
6
7

.my-element:hover {
  background-color: red; /* стиль при ховере */
}

.my-element.no-hover {
  background-color: initial !important; /* переопределение стиля для :hover */
}

А затем через JavaScript можно добавить или удалить класс no-hover для элемента:

1
2
3
4
5
6
7
8
9

const element = document.querySelector('.my-element');

element.addEventListener('mouseenter', () => {
  element.classList.add('no-hover');
});

element.addEventListener('mouseleave', () => {
  element.classList.remove('no-hover');
});

Таким образом, при наведении курсора мыши на элемент, класс no-hover будет добавлен, переопределяя стили, связанные с :hover.