Y a-t-il un `pointer-events: hoverOnly` ou similaire dans CSS?

Je viens de jouer avec la pointer-eventspropriété en CSS.

J'ai un divque je veux être invisible à tous les événements de souris, sauf pour :hover.

Ainsi, toutes les commandes de clic passent par le divà celui en dessous, mais le div peut indiquer si la souris est au-dessus ou pas encore.

Quelqu'un peut-il me dire si cela peut être fait?

HTML:

<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>

CSS:

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

Je ne pense pas qu'il soit possible d'atteindre vos objectifs uniquement en CSS. Cependant, comme d'autres contributeurs l'ont mentionné, c'est assez facile à faire dans JQuery. Voici comment je l'ai fait:

HTML

<div id="toplayer" class="layer" style="z-index:20; pointer-events:none; background-color: white; display: none;">Top layer</div><div id="bottomlayer" class="layer" style="z-index:10;">Bottom layer</div>

CSS (inchangé)

.layer {
    position:absolute;
    top:0px;
    left:0px;
    height:400px;
    width:400px;
}

JQuery

$(document).ready(function(){
    $("#bottomlayer").hover(
        function() {
            $("#toplayer").css("display", "block");
        },
        function() {
            $("#toplayer").css("display", "none");
        }
    );
});

Voici le JSFiddle: http://www.jsfiddle.net/ReZ9M

Survolez uniquement. C'est très facile. Pas de JS ... Empêche également l'action par défaut du lien.

a:hover {
	color: red;
}
a:active {
	pointer-events: none;
}

<a href="www.google.com">Link here</a>

Edit: pris en charge dans IE 11 et au-dessus http://caniuse.com/#search=pointer-events

"Voler" la réponse de Xanco mais sans ce jQuery laid et laid.

Snippet : Notez que les DIV sont dans l'ordre inverse

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 400px;
}

#bottomlayer {
  z-index: 10
}

#toplayer {
  z-index: 20;
  pointer-events: none;
  background-color: white;
  display: none
}

#bottomlayer:hover~#toplayer {
  display: block
}

<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>

Vous pouvez également détecter le survol sur différents éléments et appliquer des styles à son enfant, ou en utilisant d'autres sélecteurs css comme les enfants adjacents, etc.

Cela dépend cependant de votre cas.

Au survol de l'élément parent. J'ai fait ça:

.child {
    pointer-events: none;
    background-color: white;
}

.parent:hover > .child {
    background-color: black;
}

J'utilise le :hoverpseudo-élément d'un parent / conteneur de taille égale pour simuler un survol sur mon div de superposition, puis définissez la superposition pointer-eventssur nonepour transmettre les clics aux éléments ci-dessous.

let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');

let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: green;
  width: 300px;
  height: 300px;
}

#overlay {
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* Pass through clicks */
  pointer-events: none;
}


/* 
   Set overlay hover style based on
   :hover pseudo-element of its  
   container
*/
#container:hover #overlay {
  opacity: 0.5;
}

#woohoo-button {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container">
  <div id="overlay"></div>
  <button id="woohoo-button">
    Click Me
  </button>
</div>

Solution CSS pure à votre demande (la propriété opacity est là juste pour illustrer le besoin des transitions):

.hoverOnly:hover {
    pointer-events: none;
    opacity: 0.1;
    transition-delay: 0s;
}
.hoverOnly {
    transition: ,5s all;
    opacity: 0.75;
    transition-delay: 2s;
}

Ce qu'il fait:

Lorsque la souris entre dans la boîte, elle déclenche l' :hoverétat. Cependant, dans cet état, les événements de pointeur sont désactivés.

Mais si vous ne définissez pas les minuteries des transitions, le div annulera l'état de survol lorsque la souris se déplace; l'état de survol clignotera pendant que la souris se déplace à l'intérieur de l'élément. Vous pouvez le percevoir en utilisant le code ci-dessus avec les propriétés d'opacité.

La définition d'un délai pour la transition hors de l'état de survol le résout. La 2svaleur peut être modifiée en fonction de vos besoins.

Crédits aux transitions tweak: patad sur cette réponse .

Juste du css pur , n'a pas besoin de jquery :

div:hover {pointer-events: none}
div {pointer-events: auto}