Pointer-events: Los elementos juegan al escondite con el ratón 11.8.15
Descripción de la propiedad Css pointer-events, sus valores admitidos y cómo emularla en viejas versiones de IE (9 y 10).
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:
Pointer-events: none
Con los mismos códigos anteriores, añadimos la declaración pointer-events: none; al segundo div:
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 a | Elementos gráficos | Categoría | Propiedad de presentación. |
|---|---|---|---|
| Media | visual | Animaciones | Sí (animations, transform...) |
| Se hereda | Sí | Porcentajes | No aplican |
| Valor inicial | visiblePainted | Documentación | Pointer-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:
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.
.){kind=link}
Kseso
the obCSServer ᛯ 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 Kseso
¿Y porque debería soportarlo? No es estándar. Ópera tampoco lo soporta. La gracia es de la w3c por no ser estándar.
ResponderEliminarEsto es como decir "firefox y sus gracias" a todo lo que ie se inventó en su momento y firefox no soporta.
Anónimo
ResponderEliminarVaya, parece que le dolió la mención a ie.Pero fíjese bien que lo hago cuando ofrezco una forma de "simular" esta propiedad (con z-index) y en la que sólo ie tiene un bug.
Y por cierto, la propiedad pointer-events SÍ es estándar desde el 16 de Agosto de 2011. Le coloco el enlace, de nuevo, porque veo que no lo consultó antes de negarlo: http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
Un saludo y gracias por tu participación.
Muchísimas Gracias excelente articulo!
ResponderEliminarUna consulta amigo. Estuve viendo este sitio web que me parece espectacular http://www.diesel.com/underwear-beachwear/
Lo que más me llamó la atención es como se vé esa forma triangular, y emula un efecto muy muy elegante. Crees que se pueda lograr un efecto así como triangular usando pointer-events?. Conoces el nombre de este efecto o puedes decirme como se puede lograr? Muchas Gracias!
¿Te refieres a las 2 imágenes superiores con forma trapezoide? ¿Esas que tienen el lado común "sesgado"?
ResponderEliminarCreo que no sería demasiado complicado lograr ese efecto con skew.
Es más, en este blog hay ya publicado un slider con los laterales de las imágenes oblicuos:
Slider con bordes sesgados y transición animada.
Quizás esa demo te sirva como orientación.
Otra cuestión muy distinta es el funcionamiento y efectos de la galería.
Un saludo
Hola tengo un problema en mi blog con IE 10 http://villalisaceliano.blogspot.com.es/ con un Geomap de visitas que siempre se queda encima de un menú que sale por el lareral, con Chrome, Safari y Firefox funciona correctamente, pero con IE 10 el menú se cuela por debajo,como se poede ver en ésta captura de pantalla https://sites.google.com/site/acemarmar/fotos/pantalla.jpg, probando en el modo explorador IE7 e IE8 se ve correcto en IE9 e IE10 ya no se que hacer…hay alguna solucion?
ResponderEliminarsaludos aceliano.
Hola Aceliano
EliminarNo tengo IE10 (podría acceder a uno pero esa es otra historia...) Sin embargo te comento lo que yo veo:
Ese mapa es un objeto flash.
Con los objetos flahs se sabe desde hace mucho que para que "obedezcan" a la propiedad z-index deben tener declarado el atributo wmode con valor transparent (creo recordar que había algún otro).
Esto afectaba a todos los navegadores hace un tiempo. No se si algunos ya lo habrán corregido o no. Es un problema que no he seguido.
Pero esta práctica tiene unos problemas que deberías conocer:
guide to wmode and flash embedding (by adobe)
Sin embargo, si me permites, un par de observaciones:
Vista la info que ofreces en ese objeto ¿cuánto crees que aporta a tus visitantes?
A tenor de los peligros que describen en el enlace anterior y otros aspectos ya conocidos de flahs ¿hasta qué punto crees que merece la pena utilizar ese widget?
Un saludo
Buenas, genial el artículo, ¿podrías explicar como sería el fallback para IE? porque me desespera.
ResponderEliminarNo la hay, K-Nari0, o al menos yo la desconozco. En puro css, se entiende.
EliminarPorque la posible "solucción" de jugar con z-index la invalida el bug que comento al final del artículo.
Un saludo y gracias.
¡Hola Kseso!
ResponderEliminar¿Cómo conseguiste que volviera un post de 2012 a la página de inicio?
Me da curiosidad, porque Blogger no permite tener fecha de creación y fechas de revisión como en Wordpress :(
Pero sí permite, Alberto, modificar la fecha de publicación. Eso sí, la url permanece intocable (verás que sigue mostrando el mes y año de su publicación original).
EliminarAl menos en la vista Html (nunca usé el editor en modo Redactar sólo necesitas cambiar la fecha de publicación:
Un saludo
Claro, sí permite cambiar la fecha de publicación/creación manteniendo la url intacta. Solo que pensé que se podría poner una fecha de actualización/revisión como sucede en wordpress.
EliminarYa vi que el "Rev: 2015-08" lo generas por javascript.