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

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

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

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

Масштабирование элемента, на который наведен курсор

Затенение его одноуровневых элементов

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

Обновление!

Как предложили в комментариях, добавление поддержки :focus-within сделает эффект еще красивее.

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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