Затенение элементов при наведении курсора с CSS

От автора: небольшая хитрость написания стиля для наведения курсора CSS дает возможность выделять состояния, а также выбрать элементы одного уровня для элемента, на который наведен курсор. Эффект представляет собой смесь двух эффектов.

Суть эффекта:

See the Pen
wbBzxr by matroskin8 (@matroskin8)
on CodePen.

Состояния наведения традиционно оказывают влияние на элемент, на который наведен курсор (это имеет смысл, не правда ли?). Но мы также можем прослушивать событие hover для родительского элемента.

В этом суть этого трюка, мы затеняем все дочерние элементы, когда курсор наведен на родительский элемент, и присоединяем другой обработчик к одному дочернему элементу, обратно выделяя его:

.parent:hover > * { opacity: 0.5;
} .parent:hover > *:hover { transform: scale(1.1); opacity: 1;
}

Это довольно здорово, но есть небольшой неприятный побочный эффект, когда вы наводите курсор на промежутки между дочерними элементами — они затеняются все. К счастью, мы можем решить это с помощью pointer-events!

pointer-events: none; указывает браузеру игнорировать события мыши для элемента и всех дочерних элементов. Но если мы укажем дочернему элементу снова прослушивать события мыши с помощью pointer-events: auto;, мы получим аккуратный эффект, при котором события наведения запускаются только для дочерних элементах , но при этом запускают псевдо-селектор :hover для родительского элемента:

.parent { pointer-events: none;
} .parent > * { pointer-events: auto;
}

Все вместе, вот код для приведенного выше примера:

.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 сделает эффект еще красивее.

.parent:hover > *,
.parent:focus-within > * { opacity: 0.4;
} .parent:hover > :hover,
.parent:focus-within > :focus { transform: scale(1.1); opacity: 1;
}

И, принимая идею селектора :not() от Джейкоба, мы можем решить даже проблему, когда у нас уже есть выделенный фокусом элемент!

.parent:hover > :focus:not(:hover) { transform: scale(1.05);
}

Источник: https://www.trysmudford.com

Редакция: Команда webformyself.