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

Эффект при наведении 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/



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

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

  1. Shurikratman говорит:

    А почему первоисточник не указали? Нехорошо.

  2. Уведомление: Работаем с эффектом при наведении (hover) | Grabr

  3. Igorbelykh86 говорит:

    Как-то раньше не приходило в голову применять :hover для нескольких элементов… А ведь на самом деле, вроде простая вещь 🙂 а использовать можно по-разному

  4. lexx006 говорит:

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

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

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