Блог

В приведенном ниже примере, хотя .overlay полностью покрывает .positioner и .overlay имеет pointer-events: none , .positioner все равно реагирует на наведение. Я ожидал, что .overlay события курсора не будут проходить.

 .positioner {
  width: 100px;
  height: 100px;
  position: relative;
  background: #FAD7A0;
}

.positioner:hover {
  background: #85C1E9;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 1, 0.5);
  pointer-events: none;
}  

 <div class="positioner">
  <div class="overlay"></div>  
</div>  

Дело в том, что при наведении курсора .overlay вы также наводите курсор на его родительский элемент, то есть .positioner , поскольку они расположены друг над другом. Если вы переместитесь .overlay ниже .positioner , это не вызовет эффекта наведения на своего родителя:

 .positioner {
  width: 100px;
  height: 100px;
  position: relative;
  background: #FAD7A0;
}

.positioner:hover {
  background: #85C1E9;
}

.overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  background: rgba(0, 0, 1, 0.5);
  pointer-events: none;
}  

 <div class="positioner">
  <div class="overlay"></div>  
</div>  

Вы помещаете наложение внутри позиционера (как дочерний элемент).

Мне непонятно, хотите ли вы покрыть весь элемент позиционера с помощью наложения или только его содержимое. В последнем случае, я полагаю, вам не следует помещать hover псевдокласс в сам позиционер.

Поэтому я предполагаю, что вы хотите скрыть сам позиционер с помощью наложения, чтобы он hover не запускался. В этом случае я бы ожидал, что наложение будет размещено перед позиционером. Для этого наложение должно быть, по крайней мере, родным братом позиционера в DOM.

При тестировании я обнаружил, что использование pointer-events работает не так, как я ожидал. Но, предполагая, что наложение должно работать нормально и без него, я просто удалил его.

Это мой конечный результат:

 var input = document.querySelector("input");
var overlay = document.querySelector(".overlay");

input.addEventListener("change", function() {
  if (input.checked) {
    overlay.style.display = null;
  }
  else {
    overlay.style.display = "none";
  }
})  

 .container, .positioner {
  width: 100px;
  height: 100px;
  position: relative;
}

.positioner {
  background: #FAD7A0;
}

.positioner:hover {
  background: #85C1E9;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 1, 0.5);
}  

 <input type="checkbox" checked><label>Overlay active</label>

<div class="container">
  <div class="positioner"></div>
  <div class="overlay"></div>  
</div>  

Примечание: я не уверен, что rgba функция вызывается с правильными параметрами. Если вы хотите, чтобы оно было полупрозрачным синим, вы могли бы использовать rgba(0, 0, 255, 0.5) . Прямо сейчас он полупрозрачный черный с небольшим количеством синего.