¿Hay un `pointer-events: hoverOnly` o similar en CSS?

Acabo de jugar con la pointer-eventspropiedad en CSS.

Tengo un divque quiero que sea invisible para todos los eventos del mouse, excepto para :hover.

Entonces, todos los comandos de clic pasan por el divque está debajo, pero el div puede informar si el mouse está arriba o no quieto.

¿Alguien puede decirme si esto se puede hacer?

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

No creo que sea posible lograr sus objetivos solo con CSS. Sin embargo, como han mencionado otros colaboradores, es bastante fácil de hacer en JQuery. Así es como lo he hecho:

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 (sin cambios)

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

Aquí está el JSFiddle: http://www.jsfiddle.net/ReZ9M

Desplazarse solo. Es muy fácil. Sin JS ... Evita también la acción predeterminada del enlace.

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

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

Editar: compatible con IE 11 y superior http://caniuse.com/#search=pointer-events

"Robando" la respuesta de Xanco pero sin ese feo, feo jQuery.

Fragmento : observe que los DIV están en orden 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>

También puede detectar pasar el cursor sobre un elemento diferente y aplicar estilos a su hijo, o usar otros selectores de CSS como hijos adyacentes, etc.

Sin embargo, depende de tu caso.

Al pasar el cursor por el elemento principal. Hice esto:

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

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

Utilizo el :hoverpseudo-elemento de un padre / contenedor de igual tamaño para simular un vuelo estacionario sobre mi div superposición, a continuación, establezca de la superposición pointer-eventsa nonepasar a través de clics para elementos de abajo.

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>

Solución CSS pura para su solicitud (la propiedad de opacidad está ahí solo para ilustrar la necesidad de las transiciones):

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

Que hace:

Cuando el ratón entra en la caja, activa el :hover estado. Sin embargo, en ese estado, los eventos de puntero están deshabilitados.

Pero si no configura los temporizadores de transición, el div cancelará el estado de desplazamiento cuando se mueva el mouse; el estado de desplazamiento parpadeará mientras el mouse se mueve dentro del elemento. Puede percibir esto usando el código anterior con las propiedades de opacidad.

Establecer un retraso para la transición fuera del estado de desplazamiento lo corrige. El 2svalor se puede modificar para adaptarlo a sus necesidades.

Créditos a las transiciones tweak: patad en esta respuesta .

Solo css puro , no necesita jquery :

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