Работаем с эффектом при наведении (hover)

Have a question? Ask in chat with AI!

Эффект при наведении hoverДобрый день! Сегодня хочу привести небольшой пример работы с эффектом при наведении. Из примера вы научитесь выделять определенный элемент из группы элементов при наведении на них курсора мыши. Пример строиться на использовании свойства opacity и псевдо-классов. Итак, приступим.

Посмотреть демо

Добавить элементу эффект при наведении достаточно легко. Давайте используем opacity для изменения элемента при наведении курсора мыши:

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

А что если мы захотим применить эффект наведения ко всем элементам группы кроме того, на который наведен курсор мыши в данный момент.

Давайте для начал создадим группу блоков div:


А теперь с помощью CSS свойств применим эффект ко всем дочерним элементам, если на родительский элемент наведен курсор мыши:

.parent:hover > div {
  opacity: 0.5;
}

И в тот момент, когда курсор мыши наведен и на родительский и на конкретный блок div, мы уберем прозрачность с конкретного элемента чтобы достичь нужного нам эффекта:

.parent:hover > div:hover {
  opacity: 1.0;
}

Эту идею можно развить до нужной глубины. На демо-странице вы можете видеть пример с тремя списками. Все списки полностью непрозрачны в обычном состоянии. Если же вы наведете курсор мыши на какой-либо из списков, то он будет менее прозрачным чем остальные, а элемент на который вы наведете курсор будет полностью непрозрачным, тем самым выделяясь на фоне остальных.

Если для вас критична работа данного эффекта в старых браузерах — используйте JavaScript. Отслеживайте события mouseenter и добавляйте/убирайте имена классов.

Посмотреть демо

Оригинальная статья http://css-tricks.com/hover-on-everything-but/


6 комментариев для “0

  1. Уведомление: Работаем с эффектом при наведении (hover) | Grabr
  2. Как-то раньше не приходило в голову применять :hover для нескольких элементов… А ведь на самом деле, вроде простая вещь 🙂 а использовать можно по-разному

  3. Угу, чуваки попробуте в IE. Не пашет! так, что статья ацтой полный.
    Автор, мои извинения…

Добавить комментарий для Гилязетдинов Руслан Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Мини-бар MS Office с помощью jQuery и CSS
Следующая запись Создаем границу у сайта