C'è un `pointer-events: hoverOnly` o simile in CSS?

Stavo solo giocando con la pointer-eventsproprietà in CSS.

Ho un divche desidero essere invisibile a tutti gli eventi del mouse, ad eccezione di :hover.

Quindi tutti i comandi di clic passano da quello diva quello sottostante, ma il div può segnalare se il mouse è sopra o meno.

Qualcuno può dirmi se questo può essere fatto?

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;
}

Non credo sia possibile raggiungere i tuoi obiettivi solo con i CSS. Tuttavia, come hanno già detto altri contributori, è abbastanza facile da fare in JQuery. Ecco come l'ho fatto:

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 (invariato)

.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");
        }
    );
});

Ecco JSFiddle: http://www.jsfiddle.net/ReZ9M

Solo al passaggio del mouse. È molto facile. No JS ... Impedisci anche l'azione predefinita del collegamento.

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

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

Modifica: supportato in IE 11 e versioni successive http://caniuse.com/#search=pointer-events

"Rubare" la risposta di Xanco ma senza quel brutto, brutto jQuery.

Snippet : avviso DIV sono in ordine inverso

.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>

Puoi anche rilevare il passaggio del mouse su un elemento diverso e applicare gli stili al suo figlio o usare altri selettori CSS come figli adiacenti, ecc.

Dipende dal tuo caso però.

Al passaggio del mouse sull'elemento padre. L'ho fatto:

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

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

Uso lo :hoverpseudo-elemento di un genitore / contenitore di dimensioni uguali per simulare un passaggio del mouse sul mio div overlay, quindi imposto l'overlay pointer-eventssu noneper passare i clic agli elementi sottostanti.

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>

Soluzione CSS pura alla tua richiesta (la proprietà opacity è lì solo per illustrare la necessità delle transizioni):

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

Cosa fa:

Quando il mouse entra nella casella, attiva il :hover stato. Tuttavia, in quello stato, gli eventi del puntatore sono disabilitati.

Ma se non imposti i timer delle transizioni, il div annullerà lo stato di hover quando il mouse si sposta; lo stato al passaggio del mouse lampeggerà mentre il mouse si muove all'interno dell'elemento. Puoi percepirlo usando il codice sopra con le proprietà di opacità.

L'impostazione di un ritardo alla transizione dallo stato di hover lo risolve. Il 2svalore può essere modificato in base alle proprie esigenze.

Crediti al tweak delle transizioni: patad su questa risposta .

Solo css puro , non necessita di jquery :

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