web-dev-qa-db-fra.com

Existe-t-il un `pointer-events: hoverOnly` ou similaire en CSS?

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

J'ai une div que je veux être invisible pour tous les événements de souris, à l'exception de :hover.

Ainsi, toutes les commandes de clic vont de la variable div à celle qui se trouve en dessous, mais le div peut indiquer si la souris est au-dessus ou non.

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;
}
htmlcsspointer-events
63
Jimmery

Je ne pense pas qu'il soit possible d'atteindre vos objectifs en CSS uniquement. 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

11
Xanco

Survolez seulement. C'est très facile. Non JS ... Empêche l'action de liaison par défaut aussi.

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 versions ultérieures http://caniuse.com/#search=pointer-events

66
Свободен Роб

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

Snippet : Remarquez que les DIV sont en 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>

16
Niet the Dark Absol

Vous pouvez également détecter le survol d'un élément et appliquer des styles à son enfant, ou utiliser d'autres sélecteurs CSS, tels que des enfants adjacents, etc.

Cela dépend de votre cas cependant.

Sur l'élément parent survolez. J'ai fait ça: 

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

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

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

div:hover {pointer-events: none}
div {pointer-events: auto}
1
Bariq Dharmawan

Solution CSS pure à votre demande (la propriété opacity n’est là que pour illustrer la nécessité 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'état :hover. Cependant, dans cet état, les événements de pointeur sont désactivés. 

Mais si vous ne définissez pas les transitions, le div annulera l'état de survol lorsque la souris se déplacera. l'état de survol clignote lorsque 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 résout le problème. La valeur 2s peut être modifiée pour répondre à vos besoins.

Crédits aux transitions Tweak: patad on cette réponse .

0
Mindwin

J'utilise le pseudo-élément :hover d'un conteneur/conteneur de taille égale pour simuler un survol de ma couche de superposition, puis je règle pointer-events de la superposition sur none pour 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>

0
Jeremy Sabath