CSS: применение hover к элементу a, исключая класс active

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

Стилевые эффекты при наведении курсора можно добавить для всех элементов, исключая определённый класс, используя CSS :hover в комбинации с :not() так:

element:hover:not(.exclude-class) {
  /* стили для эффектов при наведении */
}

Таким образом, стиль при наведении будет применён ко всем элементам, кроме тех, что обладают классом .exclude-class.

Стратегическое использование эффектов наведения

Применяя :not(), можно исключить элементы с указанным классом из стилизации при наведении курсора. Предположим, у вас есть пункты меню и вы не желаете, чтобы текущий активный пункт менял своё визуальное представление при наведении:

li:not(.active):hover {
  background-color: #ff0; /* Неактивные элементы становятся жёлтыми при наведении 😄 */
}

Пункты меню с классом .active останутся без изменений, значительно выделяя активный пункт.

Чистый код, повышенная наглядность

Применение псевдокласса :hover после :not() улучшает взаимодействие пользователя с элементами в интерфейсе:

a:not(.active):hover {
  color: blue; /* Неактивные ссылки становятся синими при наведении 😉 */
}

Порядок псевдоклассов не имеет значения

Порядок применения псевдоклассов :hover и :not() не влияет на функциональность: a:hover:not(.active) и a:not(.active):hover работают идентично. Но стоит предусмотреть, что в старых браузерах может не поддерживаться :not(). В таких случаях используйте вариант без него:

a.active:hover {
  color: initial; /* Исходный цвет ссылки возвращается, если нельзя использовать современные решения оформления */
}

Совместимость со старыми браузерами

Чтобы поддерживать различные версии браузеров, используйте перекрытие специфичности стилей:

a:hover {
  color: blue; /* Яркий цвет при наведении доступен для всех */
}
a.active {
  color: red; /* Активные ссылки выделяются цветом, привлекая внимание пользователя */
}

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

Воззрите на последействие CSS :hover как на игру в прятки: все люди видны при наведении курсора, кроме того, кто "спрятался" за классом .exclude-class:

Игроки: 🧍‍♂️🧍🧍‍♂️🧍‍♂️
CSS наведение:
* { visibility: visible; } /* Всеми вижу */
.exclude-class { visibility: hidden; } /* Тебя не вижу, дружок */

В контексте CSS, это выглядит так:

:not(.exclude-class):hover {
  opacity: 1; /* Все ясно и понятно */
}
.exclude-class {
  /* Но наш дружок в классе "exclude-class" остаётся невидимым */
}

Игра в "прятки "начинается, и все идёт по плану, пока мы не применяем класс .exclude-class.

Глубже в тему: применение эффектов при наведении

Совершенствование реакции на наведение

Тонко отстройте взаимодействие пользователей с элементами, учитывая размеры объектов и расстояние между ними, чтобы избежать нежелательной реакции при наведении. ':not() позволяет исключить крупные объекты или сгруппированные элементы из эффекта наведения.

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

Изменение классов с помощью JavaScript

Вы можете программно добавлять или удалять классы с помощью JavaScript, чтобы персонализировать стили наведения в соответствии с вашими требованиями:

document.querySelector('.my-element').classList.add('no-hover'); /* Элемент становится нереагирующим на наведение */

Упрощение кода через вариативность CSS

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

element {
  --hover-effect: scale(1.2); /* Исходный размер всех элементов увеличивается */
}

element:hover {
  transform: var(--hover-effect);
}

element.no-hover {
  --hover-effect: none; /* ...а некоторые решают оставаться в своём привычном размере */
}

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

1. CSS :not Selector – W3Schools — завсегдатай использования и примеры применение селектора :not().
2. :hover – CSS: Cascading Style Sheets | MDN — подробное рассмотрение псевдокласса :hover на MDN.
3. Specifics on CSS Specificity | CSS-Tricks — особенности специфичности CSS.
4. Meet the CSS Pseudo Class Selectors | CSS-Tricks — знакомство с псевдоклассами селекторов.
5. :not | CSS-Tricks — продвинутые практики применения псевдокласса :not().