Плавный переход оболочки фоновое изображение при использовании событий React onMouseEnter и onMouseLeave для дочерних элементов - PullRequest
Новая
       20

Плавный переход оболочки фоновое изображение при использовании событий React onMouseEnter и onMouseLeave для дочерних элементов

0 голосов
/ 11 июля 2020

Моя страница имеет 4 раздела в порту просмотра:

enter image description here

I need implement smooth background image transition when hovering on each section. In my React-Next app, im using onMouseEnter/onMouseLeave events on childs, to handling wrapper className changing, so image changing to. Full working code on codesandbox ЗДЕСЬ

Как добиться плавного перехода при наведении курсора на каждого дочернего элемента CSS нет свойства background-opacity?

1 Ответ

1 голос
/ 19 июля 2020

Вы не можете изменить непрозрачность фона, но будет временное решение. Например: 

.has-background-element {
  position: relative;
  & > * {
    position: relative;
    z-index: 2;
  }

  &::before {
    content: "";
    background-image: url('');
    opacity: 0;
    transition: 0.5s opacity;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &:hover {
    &::before {
      opacity: 0;
      visibility: hidden;
    }
  }
}

В случае, если вам нужно установить фоновое изображение динамически, следует заменить &:before на определенный элемент c.

...