Определение наведения на блок под блоком JS/JQuery

Question

Задача обнаружить, если мышь пройдет над блоком, который располагается под другим блоком.

Есть 2 блока

.front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="back"></div>
<div class="front"></div>

Обычный mouseenter, естественно, не сработает:

$('.back').mouseenter(()=>{console.log('+');});

Блок-клон нижнего с z-index не предлагайте, до такого и сам догадался, но это возбудит много лишнего html-кода, чего делать не хочется. Должно быть что-то поумнее...

Конструктор: https://jsfiddle.net/few1h534/1/

Answer 1

Можно решить через свойство css pointer-events

$('.back').mouseenter(()=>{console.log('+');});

.front{
  position: absolute;
  top: 0;
  width: 200px;
    height: 200px;
  opacity: .2;
  background: blue;
  pointer-events:none;
}

.back{
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back"></div>
<div class="front"></div>

БЛОГ НА HUSL

Определение наведения на блок под блоком JS/JQuery

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