Применений стилей при наведении к элементам не имеющих общих родителей

Question

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

к примеру я курсором навожу на video__control__info(любой из них) и стили применяются video__controls__item__top и ideo__controls__item__bottom

 <div className="video__control__info">
        <div className="video__controls__item__top"> </div>
    </div>
    <div className="video__control__info">
        <div className="video__controls__item__bottom"> </div>
    </div>

стили(.scss)

.video__control__info{
  .video__controls__item__top{
    transform: translateY(-150%);
    transition: all 0.3s ease-in-out 5s;
  }
  .video__controls__item__bottom{
    transform: translateY(150%);
    transition: all 0.3s ease-in-out 5s;
  }
}
.video__control__info:hover{
  .video__controlls__item__top{
    transform: translateY(0%);
    transition: all 0.3s ease-in-out;
  }
  .video__controls__item__bottom{
    transform: translateY(0%);
    transition: all 0.3s ease-in-out ;
  }
}

Answer 1

В 99.9% случаев общий родитель существует. Необходимо только правильно "прокинуть" событие:

div { padding: .5em; }

body { pointer-events: none; }
.video__control__info { pointer-events: auto; }

.video__control__info .video__controls__item__top {
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out .5s;
}
.video__control__info .video__controls__item__bottom {
  transform: translateY(50%);
  transition: all 0.3s ease-in-out .5s;
}

body:hover .video__control__info .video__controls__item__top {
  transform: translateY(0%);
  transition: all 0.3s ease-in-out;
}
body:hover .video__control__info .video__controls__item__bottom {
  transform: translateY(0%);
  transition: all 0.3s ease-in-out;
}

<br><div class="video__control__info" style="background: #090">
  <div class="video__controls__item__top" style="background: #fa0">1</div>
</div>
<br><div class="video__control__info" style="background: #00f">
  <div class="video__controls__item__bottom" style="background: #f00">2</div>
</div>

БЛОГ НА HUSL

Применений стилей при наведении к элементам не имеющих общих родителей

Ответы (1 шт):