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


104

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

2
Solo una nota, pointer-eventsno está bien soportado en IE .
Vucko

2
Parece que necesitas javascript
Pete

De acuerdo con Pete, sé que esto está pidiendo específicamente css, pero tuve el mismo problema y la solución más fácil para mí fue que el niño iniciara un clic en el padre con javascript stackoverflow.com/questions/35872534/…
Jerry Sha

Respuestas:


12

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


107

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


23
esto 'funciona'; sin embargo, no permite hacer clic en un elemento a continuación (al menos no cuando ese elemento es un video de YouTube), que es probablemente la única razón por la que alguien necesitaría ese comportamiento en primer lugar
Simon_Weaver

1
¿No requiere esto un clic en el elemento para deshabilitar más eventos de puntero?
Mindwin

3
esto es
hermoso

2
@PriyanshuJain ¿qué crees que pasará si el usuario hace clic en el botón?
Свободен Роб

1
inteligente 💐 (eso es todo lo que necesito decir)
Davious

24

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


2
lo siento, estoy usando el feo jquery de todos modos. ¡pero tenga un voto positivo para una solución única de CSS!
Jimmery

esto es genial, solo para su información, desafortunadamente no funciona correctamente si la capa inferior contiene un iframe: jsfiddle.net/ReZ9M/82
Simon_Weaver

1
¿Cómo resuelve esto la pregunta? El OP solicitó comandos de clic para pasar por el elemento inicialmente visible. En su solución no lo hacen, observe cómo el texto "Capa superior" no se puede resaltar ...
Trever Thompson

6

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

1

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.


0

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 .


El elemento simplemente se atasca en el estado "hover" cuando probé esta solución.
Flimm

0

Solo css puro , no necesita jquery :

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

Hola, muchas gracias por esto, ¿puede agregar una demostración a su respuesta (como un fragmento de código o un enlace a esto en codepen o jsfiddle?), Y ¿sabe qué tipo de compatibilidad tiene esto? ¿Es una nueva característica de CSS3? Si esto funciona, definitivamente te daré un tic :)
Jimmery

lo siento, no puedo crear una demostración. Pero en mi lógica, definitivamente funciona en todos los navegadores (no lo sé, porque no tengo ie). Y es compatible con css1 :)
Bariq Dharmawan

caniuse.com/#feat=pointer-events - no funcionará en ningún IE excepto en 11 ... si crea una demostración funcional de lo que quiere decir aquí codepen.io lo probaré por usted y si funciona, lo haré otorgarle la respuesta correcta - lo siento, no puedo
atribuir

@brillout, ¿puedes agregar un fragmento? Porque es un trabajo para mí
Bariq Dharmawan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.