Existe um `ponteiro-events: hoverOnly` ou similar em CSS?

Acabei de brincar com pointer-eventspropriedade em CSS.

Eu tenho um divque quero ficar invisível para todos os eventos do mouse, exceto para :hover.

Assim, todos os comandos de clique passam pelo divpara o abaixo dele, mas o div pode relatar se o mouse está acima dele ou não.

Alguém pode me dizer se isso pode ser feito?

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

Não acho que seja possível atingir seus objetivos apenas em CSS. No entanto, como outros colaboradores mencionaram, é bastante fácil de fazer em JQuery. Veja como eu fiz:

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

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

Aqui está o JSFiddle: http://www.jsfiddle.net/ReZ9M

Passe o mouse apenas. Isso é muito fácil. Sem JS ... Impedir ação padrão do link também.

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

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

Editar: compatível com IE 11 e superior http://caniuse.com/#search=pointer-events

"Roubar" a resposta de Xanco, mas sem aquela jQuery feia, feia.

Snippet : Observe que os DIVs estão na ordem inversa

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

Você também pode detectar a passagem do mouse sobre um elemento diferente e aplicar estilos a seu filho, ou usar outros seletores css como filhos adjacentes, etc.

Depende do seu caso.

No elemento pai, passe o mouse. Eu fiz isso:

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

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

I utilizar a :hoverpseudo-elemento de um pai / recipiente de igual tamanho para simular um pairar sobre o meu sobreposição div, em seguida, definir a sobreposição pointer-eventspara nonepassar através de cliques para elementos abaixo.

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>

Solução CSS puro para sua solicitação (a propriedade opacity existe apenas para ilustrar a necessidade das transições):

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

O que faz:

Quando o mouse entra na caixa, ele aciona o :hover estado. No entanto, nesse estado, os eventos de ponteiro são desabilitados.

Mas se você não definir os temporizadores de transição, o div cancelará o estado de foco quando o mouse se mover; o estado de foco irá piscar enquanto o mouse está se movendo dentro do elemento. Você pode perceber isso usando o código acima com as propriedades de opacidade.

Definir um atraso para a transição fora do estado de foco corrige isso. O 2svalor pode ser ajustado para atender às suas necessidades.

Créditos para transições ajustar: patad sobre esta resposta .

Apenas css puro , não precisa de jquery :

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