Выделение "всех, кроме" при наведении курсора мыши


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