От автора: небольшая хитрость написания стиля для наведения курсора CSS дает возможность выделять состояния, а также выбрать элементы одного уровня для элемента, на который наведен курсор. Эффект представляет собой смесь двух эффектов.
Суть эффекта:
Масштабирование элемента, на который наведен курсор
Затенение его одноуровневых элементов
See the Pen
wbBzxr by matroskin8 (@matroskin8)
on CodePen.
Состояния наведения традиционно оказывают влияние на элемент, на который наведен курсор (это имеет смысл, не правда ли?). Но мы также можем прослушивать событие hover для родительского элемента.
В этом суть этого трюка, мы затеняем все дочерние элементы, когда курсор наведен на родительский элемент, и присоединяем другой обработчик к одному дочернему элементу, обратно выделяя его:
|
1 2 3 4 5 6 7 8 |
.parent:hover > * { opacity: 0.5; } .parent:hover > *:hover { transform: scale(1.1); opacity: 1; } |
Это довольно здорово, но есть небольшой неприятный побочный эффект, когда вы наводите курсор на промежутки между дочерними элементами — они затеняются все. К счастью, мы можем решить это с помощью pointer-events!
pointer-events: none; указывает браузеру игнорировать события мыши для элемента и всех дочерних элементов. Но если мы укажем дочернему элементу снова прослушивать события мыши с помощью pointer-events: auto;, мы получим аккуратный эффект, при котором события наведения запускаются только для дочерних элементах , но при этом запускают псевдо-селектор :hover для родительского элемента:
|
1 2 3 4 5 6 7 |
.parent { pointer-events: none; } .parent > * { pointer-events: auto; } |
Все вместе, вот код для приведенного выше примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.fade-out-siblings { --gutter: 2.5rem; background: var(--gradient-blue); text-align: center; grid-gap: var(--gutter); padding: var(--gutter); display: grid; margin: 2rem 0; pointer-events: none; } .fade-out-siblings > * { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #fff; padding: 2rem 1rem; cursor: pointer; pointer-events: auto; transition: 300ms opacity, 300ms transform; } .fade-out-siblings:hover > * { opacity: 0.4; } .fade-out-siblings:hover > *:hover { transform: scale(1.1); opacity: 1; } @media (min-width: 40em) { .fade-out-siblings { grid-template-columns: repeat(3, 1fr); } .fade-out-siblings > * { padding: 4rem 1rem; } } |
Обновление!
Как предложили в комментариях, добавление поддержки :focus-within сделает эффект еще красивее.
|
1 2 3 4 5 6 7 8 9 10 |
.parent:hover > *, .parent:focus-within > * { opacity: 0.4; } .parent:hover > :hover, .parent:focus-within > :focus { transform: scale(1.1); opacity: 1; } |
И, принимая идею селектора :not() от Джейкоба, мы можем решить даже проблему, когда у нас уже есть выделенный фокусом элемент!
|
1 2 3 |
.parent:hover > :focus:not(:hover) { transform: scale(1.05); } |
Источник: //www.trysmudford.com
Редакция: Команда webformyself.
