html - none - pointer-events jquery

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

Question

Solo he estado jugando con propiedad de pointer-events en CSS.

Tengo un div que quiero ser invisible para todos los eventos del mouse, a excepción de :hover .

De modo que todos los comandos de clic pasan por el div hasta el siguiente, pero el div puede informar si el mouse está arriba o no.

¿Alguien puede decirme si esto puede hacerse?

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

Answer 1

"Robando" la respuesta de Xanco, pero sin esa fea y fea jQuery.

HTML: (Los DIV de notificación están en orden inverso)

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

CSS:

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

Fiddle actualizado

Answer 2

Flotar solo Es muy fácil. No 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

Answer 3

No creo que sea posible alcanzar tus objetivos solo en CSS. Sin embargo, como otros colaboradores han mencionado, es bastante fácil de hacer en JQuery. Así es como lo hice:

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

Answer 4

Solo css puro, no necesita jquery :

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

Answer 5

Solución de CSS puro 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 mouse entra en el cuadro, desencadena el :hover estado de :hover . 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. Puedes percibir esto usando el código de arriba con las propiedades de opacidad.

Establecer un retraso para la transición fuera del estado de vuelo estacionario lo soluciona. El valor 2s se puede modificar para adaptarlo a sus necesidades.

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

Answer 6

También puede detectar el desplazamiento sobre otro elemento y aplicar estilos a su elemento secundario, o usar otros selectores de CSS como los hijos adyacentes, etc.

Sin embargo, depende de tu caso.

En elemento emergente de elemento principal. Hice esto:

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

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

Answer 7

Uso el pseudo-elemento :hover de un contenedor principal / tamaño igual para simular un elemento emergente sobre mi div superposición, luego establezco los pointer-events de pointer-events la superposición en none para pasar los clics a los elementos a continuación.

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>