Добавить состояние hover к элементу очень просто. Воспользуемся изменением непрозрачности, например:
div {
opacity: 1.0;
}
div:hover {
opacity: 0.5;
}
Но что если нам нужно изменить состояние hover для "всего, кроме" элемента, над которым действительно находится курсор мыши? (например, для соседних элементов div)
Рассмотрим базовую структуру HTML:
<section class="parent">
<div></div>
<div></div>
<div></div>
</section>
Мы используем свойства CSS для всех потомков родителя, когда родительский элемент получает состояние hover.
.parent:hover > div {
opacity: 0.5;
}
А когда родительский элемент находится в состоянии hover и конкретный элемент div получает состояние hover, мы изменяем его прозрачность обратно, добиваясь нужного эффекта.
.parent:hover > div:hover {
opacity: 1.0;
}
Идея может быть расширена до нескольких уровней. Смотрите демонстрацию. Здесь представлены три списка. Все элементы имеют полную непрозрачность в обычном состоянии. Список, который в настоящий момент имеет состояние hover имеет больший уровень непрозрачности, чем остальные. А элемент, который имеет состояние hover, совсем непрозрачный.
Всем известный браузер не использует псевдо элемент :hover нигде, кроме ссылок. Если проект требует поддерживать устаревшие инструменты, используйте JavaScript для определения события mouseenter и изменения классов.