Dans l'exemple ci-dessous, bien que .overlay couvre entièrement .positioner et .overlay a pointer-events: none, .positioner réagit toujours au survol. Je m'attendais à ce que .overlay ne transmette pas les événements de curseur.

.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>
0
Takesi Tokugawa YD 21 oct. 2020 à 10:18

2 réponses

Meilleure réponse

Le fait est que lorsque vous survolez .overlay, vous survolez également son parent, qui est .positioner, car ils sont positionnés les uns sur les autres. Si vous déplacez .overlay sous .positioner, cela ne déclenchera pas d'effet de survol sur son parent:

.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>
1
jjakkubb 21 oct. 2020 à 07:41

Vous placez la superposition dans le positionneur (en tant qu'élément enfant).

Ce n'est pas clair pour moi si vous voulez couvrir tout l'élément du positionneur en utilisant la superposition ou simplement son contenu. Dans ce dernier cas, vous ne devriez pas mettre une pseudo-classe hover sur le positionneur lui-même, je suppose.

Je suppose donc que vous voulez masquer le positionneur lui-même en utilisant la superposition, afin que son hover ne soit pas déclenché. Dans ce cas, je m'attendrais à ce que la superposition soit placée devant le positionneur. Pour cela, la superposition doit au moins être un frère du positionneur dans le DOM.

Lors des tests, j'ai découvert que l'utilisation de pointer-events ne fonctionnait pas comme prévu. Mais en supposant que la superposition puisse fonctionner correctement sans elle, je l'ai simplement supprimée.

Voici mon résultat final:

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>

Remarque: je ne sais pas si la fonction rgba est appelée avec les paramètres corrects. Si vous voulez qu'il soit bleu semi-transparent, vous pouvez utiliser rgba(0, 0, 255, 0.5). À l'heure actuelle, il est noir semi-transparent avec juste un tout petit peu de bleu.

0
Bart Hofland 21 oct. 2020 à 08:20