Как сделать div под другим получить событие парения?

Question

Вот пример кода, который демонстрирует проблему

.under {
   position: absolute;
   top: 10px;
   left: 10px;
   border: 2px solid blue;
   width: 150px;
   height: 150px;
}

.under:hover {
   border: 10px solid green;

}

.over {
   position: absolute;
   z-index: 10;
   top: 10px;
   left: 10px;
   width: 150px;
   height: 150px;
   border: 1px solid black;
}

<div>
  <div class="under">
      Hello!
  </div>

  <div class="over" data-comment="I am invisible">
  </div>
</div>

Когда указатель мыши находится над элементом over, я хочу, чтобы элемент under знал о событии наведения и, в этом случае, изменялграница соответственно.

Однако over div, по-видимому, перехватывает событие hover.Может ли быть чистое решение css для передачи события hover в under div?

Answer 1

Я бы настроил структуру HTML и обнаружил бы наведение на .over

.under {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 2px solid blue;
  width: 150px;
  height: 150px;
}

.over:hover + .under {
  border: 10px solid green;
}

.over {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

<div>
  <div class="over" data-comment="I am invisible"></div>
  <div class="under">Hello!</div>
</div>

Answer 2

Замените порядок делений и установите при наведении на over значение ~, которое предназначено для следующего брата

.under {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 2px solid blue;
  width: 150px;
  height: 150px;
}

.under:hover {
  border: 10px solid green;
}

.over {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.over:hover~div {
  border: 10px solid green;
}

<div>
  <div class="over" data-comment="I am invisible">
  </div>
  <div class="under">
    Hello!
  </div>


</div>

Answer 3

Указатель событий на помощь!Просто установите pointer-events: none; на .over.

.under {
   position: absolute;
   top: 10px;
   left: 10px;
   border: 2px solid blue;
   width: 150px;
   height: 150px;
}

.under:hover {
   border: 10px solid green;

}

.over {
   position: absolute;
   z-index: 10;
   top: 10px;
   left: 10px;
   width: 150px;
   height: 150px;
   border: 1px solid black;
pointer-events: none;
}

<div>
  <div class="under">
      Hello!
  </div>

  <div class="over" data-comment="I am invisible">
  </div>
</div>

Обратите внимание, это заставит .over div игнорировать ВСЕ события указателя, поэтому обработчики щелчков JavaScript не будут работать