07
Май
2019

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

Затенение элементов при наведении курсора с 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.

Share

Тебе может это понравится...