Удаление стиля :hover CSS с элемента: решение без jQuery

Быстрый ответ

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

.element:hover {
  /* отключаем измения, возвращаем исходные стили */
  background: original-background;
  color: original-color;
}

Теперь при взаимодействии с элементом он останется без изменений.

Более сложные способы отключения эффекта наведения

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

1. Заблокировать события курсора: Сделайте элемент "невидимым" для событий курсора, используя pointer-events: none;. Так элемент больше не будет реагировать на наведение и клики:

   CSS

   Скопировать код

    .no-hover {
      pointer-events: none; /* Элемент как неподвижный объект, на который не влияют воздействия */
    }

   Запустить код

2. Класс .disabled: Этот класс можно использовать как "щит" от воздействий, включая наведение:

   CSS

   Скопировать код

    .disabled:hover {
      background: original-background;
      pointer-events: none; /* Как защита, в безопасном пространстве для элемента */
    }

   Запустить код

3. Намеренное исключение эффектов: Иногда вам может потребоваться установить иерархию элементов. При помощи псевдокласса :not() вы сможете выборочно ограничивать применение эффектов:

   CSS

   Скопировать код

    .element:not(.no-hover):hover {
      /* Стили для :hover; "VIP-статус для наведения!" */
    }

   Запустить код

4. Отображение элемента как "неактивного": Визуальный эффект "отключенного" элемента можно создать с помощью комбинации pointer-events: none; и opacity: 0.2;, чтобы было ясно, что элемент не активен.

5. Точечное переопределение стилей: Если нужно изменить определенный стиль при наведении, можно точечно настроить CSS-правила для этого.

Управление эффектом :hover

Метод "Закрой и успокой"

Представим :hover как одеяло, которое накидывается на элемент. Чтобы его "убрать", можно перекрыть его другим, более "легким", используя свойство pointer-events: none; и установив прозрачность равной opacity: 0.5.

.top-layer:hover {
  pointer-events: none; /* Безмятежность и легкость */
  opacity: 0.5;
  /* Привлечение внимания */
  z-index: 100;
}

Подробнее об этом расскажет наш спикер на видео

Использование JavaScript для динамического управления

Когда статические стили CSS не справляются с задачей, используйте JavaScript. По мере необходимости добавьте или удаляйте классы для управления эффектами при наведении:

document.querySelector('.element').classList.add('no-hover'); // класс ".no-hover" теперь на месте

Вот как может выглядеть соответствующее CSS-правило:

.no-hover:hover {
  /* Стилей для эффекта :hover больше не будет */
}

Полезные практические примеры

Прочтение материала — это только полдороги, нужна еще практическая проработка. Примените реальные примеры, такие как JSFiddle, для закрепления полученных знаний, указанные в разделе полезные материалы.

Визуализация

Псевдокласс :hover можно представить как муху (🪰), которая приземляется на ничего не подозревающий элемент при приближении курсора:

Элемент без :hover: 🟩  <-- Здесь всё спокойно, как в зеленом квадрате.

Заставляющее насторожиться беспокойство начинает развиваться при приближении "мухи":

Элемент с :hover:   🟩🪰 <-- Что за шум? Это "муха" добавляет элементу драматизма.

Пришло время избавиться от раздражающего "жужжания". Удалим :hover:

CSS "пинцет":          🟩🚫🪰 <-- CSS берет инициативу в свои руки, "муха" улетает, наступает тишина при наведении.

Удалив эффект наведения, мы сохраняем спокойствие элемента, сравнимое с камнем в зен-саде 🟩.

Полезные материалы

1. CSS :hover Селектор — Исчерпывающая информация и управление псевдоклассом :hover.
2. :hover – CSS: Каскадные Таблицы Стилей | MDN — Детальный разбор и примеры работы с псевдоклассом :hover.
3. Проблема двойного тапа по ссылке на мобильных устройствах | CSS-Tricks — Эффективные методы решения проблем, связанных с сенсорными событиями на мобильных устройствах.
4. Селекторы Уровня 3 — Подробное руководство W3C по CSS-селекторам, в том числе :hover.
5. Пример на JSFiddle – Обучающие примеры и упражнения по удалению эффектов наведения.