Psychotik

solucionando marrones desde 2003

Pointer-events, control de contenidos en capas, más allá de z-index

Pertenece a  Destacados, Tips  el 18 Noviembre
Pointer-events

La etiqueta pointer-events puede resultarnos de mucha utilidad cuando trabajamos con capas superpuestas. Supongamos que estamos haciendo un diseño cuyos detalles gráficos se colocan encima de nuestros contenidos en distintas capas, si utilizamos z-index, lo tenemos resuelto y el texto es seleccionable, ¿verdad? Por lo general sí.

Pero ahora pongamos por ejemplo que en vez de detalles gráficos, tenemos contenido en ambas capas y en la inferior un enlace, con z-index tenemos un problema ya que esta propiedad nos indica qué, la capa que lleve un mayor número, será la que esté por encima, por ejemplo: z-index:5, estará por encima de z-index:2. Lo primero que se nos puede venir a la cabeza es un “vale, pues al hacer :hover cambio los valores de z-index y asunto solucionado”, pues se puede dar algún caso, pero por lo general esa no es la solución ya al cambiar el valor se nos volcará la capa inferior sobre la superior, creando un efecto bastante feo por lo general.

Aquí es donde entra pointer-events, esta etiqueta lo que provoca es que le digamos a los contenidos si deben o no tener eventos de cursos, independientemente de la capa en la que se encuentren, o lo que es lo mismo, ignorando el z-index y haciendo nuestros textos y enlaces sean clickables/seleccionables sin que se superpongan.

Ejemplo:

Vestibulum vestibulum libero vitae lacus. Pellentesque vitae tortor consequat pede tincidunt blandit. Curabitur mi. Sed a arcu a neque faucibus lobortis. Nullam eu diam eget neque mollis vestibulum. Curabitur iaculis ultricies elit porttitor.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pellentesque, mi eu mattis auctor, lorem velit ultricies urna, id fermentum enlace con pointer events

Lo único que debemos hacer es añadir pointer-events a la capa superior, en este ejemplo la capa transparente, con el valor none para que todo lo que esté debajo mantenga sus propiedades originales:

CSS:
.capaSuperior{
   pointer-events:none;
}

Tiene otras propiedades básicas como all o inherit que permiten forzar que los eventos de cursor estén activos en su totalidad o los heredados, además tiene aplicaciones sobre los gráficos SVG de los que hablaré más adelante en el blog.

Solo queda por comentar que esta propiedad funciona en todos los navegadores salvo en Internet Explorer, donde solo es aplicable para la versión 11 del navegador pero no para las anteriores.

Si tienes alguna duda sobre este tema, ¡deja tu comentario!


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »