soy Kseso y esto EsCSS

Pointer-events: Los elementos juegan al escondite con el ratón

Pointer-events: Los elementos juegan al escondite con el ratón

·Por Kseso ✎ 11
Pointer-events: Los elementos juegan al escondite con el ratón

La propiedad pointer-events permite controlar si un elemento puede o no recibir los eventos del cursor con independencia del orden de apilación (su valor de z-index).

Dicho de otra forma: si es invisible puntero o no.
Cuando dos elementos están superpuestos, al pasar el ratón por ellos, el que reacciona al :hover, por ejemplo, es el último que aparece en el flujo del documento, excepto que inviertan su orden de apilamiento con z-index.

¿Lo vemos con un ejemplo?
Tomemos el siguiente código html con dos div´s, hagamos que el segundo se superponga sobre el primero y que cambien su color al :hover. El comportamiento es el esperado por ser lo natural:

<div class="Pointer-events1"> <div class="uno">Primero</div> <div class="dos">Segundo</div> </div> .pointer-events1 div:hover { background: #F3F3A1; border: red; }

Prueba ahora a pasar el ratón:

Primero
Segundo

Pointer-events: none

Con los mismos códigos anteriores, añadimos la declaración pointer-events: none; al segundo div:

Primero
Segundo

Soporte de navegadores para Pointer-events

En caniuse.com puedes ver el estado actual. En el momento de editar y actualizar este artículo se podría decir que es "universal". Con alguna particularidad relevante en los IE´s que vemos un poco más abajo

Valores y sintaxis

La sintaxis es la típica de css: propiedad:valor; y los valores que admite son:

  • visiblePainted
  • visibleFill
  • visibleStroke
  • visible
  • painted
  • fill
  • stroke
  • all
  • none
  • inherit
Aplica aElementos gráficosCategoríaPropiedad de presentación.
MediavisualAnimacionesSí (animations, transform...)
Se heredaPorcentajesNo aplican
Valor inicialvisiblePaintedDocumentaciónPointer-events

Internet Explorer y sus "particularidades":

Si bien desde IE11 es soportada por esta familia de navegadores, los enlaces han de ser declarados como elementos de bloque o inline-block para que IE10 la aplique.

La versión 9 y 10 de Internet Explorer la soporta en elementos SVG pero no en los elementos Html.

Simulando Pointer-events en viejos IE

Si consultaste el soporte por los navegadores a Pointer-events, habrás visto que a fecha de hoy ni la última versión de IE (9) la soportan. Pero hay una manera de simularlo en ellos.
Sólo es cuestión de jugar con z-index como en el ejemplo de abajo. Claro que para simular el efecto, la caja con un valor más alto (div 1) hay que dejarla sin background.

Pero entonces aparecen los duendes de internet explorer para sorpresa de todos. Pasa el puntero por las cajas de abajo, las dos, y sobre el texto de ellas con cualquier navegador y después, si no tienes miedo a los sarpullidos, hazlo con IE:

"DIV 1"
PRUEBA EN IE y OTROS:
hover al texto y en su caja "DIV 2"

Las meigas de IE:

Abre IE y haz :hover dentro y fuera del texto del DIV 2. En IE (todos hasta al menos el 9), si div-1 tiene una altura y una anchura, y está situada por encima del div-2 (z-index), pero no tiene background de color o imagen, se puede interactuar (:hover en el ejemplo) con DIV 2 siempre que tenga contenido. Así que cuando pasas el puntero sobre el texto "PRUEBA EN IE y OTROS: hover al texto y en su caja (DIV 2)" el DIV 1 pierde el foco del ratón pese a tener un z-index mayor. Puedes observarlo por el cambio del color del fondo y el borde.

Este artículo fue publicado originalmente el 22 de Abril de 2012. Actualizado el 11 de Agosto de 2015.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso