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

Добавить состояние 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;
}

 

Очень похожее поведение используется на Twitter для приложений на Mac:


Идея может быть расширена до нескольких уровней. Смотрите демонстрацию. Здесь представлены три списка. Все элементы имеют полную непрозрачность в обычном состоянии. Список, который в настоящий момент имеет состояние hover имеет больший уровень непрозрачности, чем остальные. А элемент, который имеет состояние hover, совсем непрозрачный.

Всем известный браузер не использует псевдо элемент :hover нигде, кроме ссылок. Если проект требует поддерживать устаревшие инструменты, используйте JavaScript для определения события mouseenter и изменения классов.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mSG51-cfxJY/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Выделение всех, кроме при наведении курсора мыши | | 2012-06-25 16:21:14 | | Статьи Web-мастеру | | Добавить состояние hover к элементу очень просто. Воспользуемся изменением непрозрачности, например:div { opacity: 1.0; } div:hover { opacity: 0.5; } Но что если нам нужно изменить состояние hover | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: