Как отключить hover css
Перейти к содержимому

Как отключить hover css

  • автор:

Как отключить hover css

Можно использовать свойство pointer-events: none; в CSS для этого элемента.

a.disabled  pointer-events: none; > 

Это уберет данный эффект для ссылки с классом disabled . Стоит обратить внимание, что при использовании этого свойства элемент не будет реагировать ни на какие события мыши, включая нажатия.

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

Примените два класса к соответствующему элементу. Один содержит поведение при наведении, а другой содержит все остальные стили. Вот метод, позволяющий удалить класс с поведением при наведении реализованный на jQuery :

$(element).removeClass('hover'); 

Вот реализация этих же действий на нативном JS :

element.classList.remove('hover'); //element это уже полученный узел DOM 

Отслеживать
2,077 1 1 золотой знак 8 8 серебряных знаков 23 23 бронзовых знака
ответ дан 3 авг 2021 в 19:20
Maxim Kuskov Maxim Kuskov
359 1 1 серебряный знак 6 6 бронзовых знаков

Вoпросы с меткой [javascript] но без метки какой-либо библиотеки (и без явного контекста ее использования) предполагают ответы на чистом JavaScript’e. Это имеет значение, т.к. метки тематические: они помогают участникам находить именно те ответы, которые нужны. Конечно, в случаях когда сторонняя библиотека сама по себе является решением — уместно предлагать, но в данном случае стандартных возможностей достаточно: element.classList.remove(‘hover’); . Прошу отнестись с пониманием и учитывать тематику вопросов.

3 авг 2021 в 19:57

Несколько проще и быстрее будет через CSS таким образом, при наведение на все элементы которые не disabled будет срабатывать cursor: pointer

.btn:not([disabled]):hover

Как убрать hover при разных разрешениях?

webirus

Если требуется переопределить, то да, решение адекватное.

Но если тупо убрать, то не совсем правильно. Гораздо удобнее использовать обратный медиа запрос, как советует ниже Артём Ведищев

.element < // стили для блока >@media all and (min-width: 991px) < .element:hover < // стили для ховера при экране больше 991 >>

Можно как то запретить срабатывание :hover css до повторного наведения?

Я думаю сталкивались многие, в чем суть:
Имеем допустим кнопку, которая по клику получает дополнительный класс active но у кнопки есть эффект :hover который тут же срабатывает так как после клика курсор по прежнему находится на кнопке.
Вместо того чтобы видеть зеленую кнопку после клика, мы видим синюю так как hover внес свои поправки.

Как запретить срабатывание :hover сразу, а разрешить только при повторном наведении курсора?

  • Вопрос задан более трёх лет назад
  • 4808 просмотров

5 комментариев

Средний 5 комментариев

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *