Добрый день! Сегодня хочу привести небольшой пример работы с эффектом при наведении. Из примера вы научитесь выделять определенный элемент из группы элементов при наведении на них курсора мыши. Пример строиться на использовании свойства
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/
А почему первоисточник не указали? Нехорошо.
спасибо, что напомнили.
Как-то раньше не приходило в голову применять :hover для нескольких элементов… А ведь на самом деле, вроде простая вещь 🙂 а использовать можно по-разному
Угу, чуваки попробуте в IE. Не пашет! так, что статья ацтой полный.
Автор, мои извинения…
нехрен его юзать!!!