Click Through div to Underlying Elements – CSS

En la programación, en ocasiones necesitamos que un elemento no sea clickeable y que el clic se transmita a través del mismo hacia otro elemento que se encuentre detrás de él. Para lograr esto, podemos utilizar una propiedad CSS llamada "pointer-events". En este artículo, discutiremos cómo utilizar esta propiedad para crear elementos clickeables y no clickeables en una página web.

¿Qué es la propiedad pointer-events en CSS?

La propiedad CSS "pointer-events" define el comportamiento del mouse en relación a un elemento. Con esta propiedad se puede hacer que un elemento ignore o maneje ciertos eventos del mouse, incluyendo clics, movimientos y apuntado. Esta propiedad puede ser útil cuando queremos que un elemento esté presente en la página, pero que no sea interactuable de ninguna manera por el usuario, o cuando queremos hacer clic en un elemento que se encuentra detrás de otro.

¿Cómo se utiliza la propiedad pointer-events?

La propiedad "pointer-events" se puede aplicar a cualquier elemento de HTML utilizando CSS. Esta propiedad acepta varios valores diferentes, que incluyen:

• auto: El elemento hereda el comportamiento del elemento padre
• all: El elemento está habilitado para todos los eventos del mouse
• none: El elemento no está habilitado para ningún evento del mouse
• visiblePainted: El elemento solo está habilitado para eventos de puntero que se ven
• visibleFill: El elemento solo está habilitado para eventos de puntero que afectan el relleno
• visibleStroke: El elemento solo está habilitado para eventos de puntero que afectan al trazo
• visible: El elemento solo está habilitado para eventos de puntero que se ven o afectan al trazo o relleno
• paint: El elemento está habilitado solo para eventos de puntero que afectan el espacio de pantalla del elemento
• stroke: El elemento está habilitado solo para eventos de puntero que afectan al trazo
• fill: El elemento está habilitado solo para eventos de puntero que afectan al relleno

Ejemplo de código:

div {
pointer-events: none;
}

En este ejemplo, se hace que el elemento div no tenga eventos del mouse habilitados, por lo que cualquier clic o movimiento del mouse se transmitirá al elemento que se encuentra detrás de él.

Cómo usar "pointer-events" para hacer clic en elementos detrás de otro

Para hacer clic en un elemento que se encuentra detrás de otro, necesitamos hacer que el elemento delantero no responda a eventos del mouse, y luego hacer clic en el elemento de atrás. Un ejemplo común es utilizar un menú emergente que cubra la pantalla cuando se hace clic en un botón, y luego permitir que el usuario haga clic en elementos que se encuentran detrás del menú.

Para hacer esto, estableceremos la propiedad "pointer-events" en "none" en el elemento delantero, y luego haremos clic en el elemento detrás utilizando JavaScript.

Ejemplo de código:


div {
pointer-events: none;
}



document.querySelector('#elementoAtras').addEventListener('click', function() {
//Código para hacer algo al hacer clic en el elemento detrás
});


Conclusión

La propiedad "pointer-events" es una herramienta útil en CSS que nos permite definir el comportamiento del mouse en relación a un elemento. Al saber cómo utilizar esta propiedad, podemos crear elementos clickeables y no clickeables en una página web de manera efectiva y eficiente.

Esperamos que este artículo haya sido de ayuda para entender cómo hacer que los elementos clickeables y no clickeables en CSS. Ya sabes cómo usar "pointer-events" para que los elementos que se encuentran detrás de otro puedan ser clickeados. No dudes en implementar esta técnica en tus proyectos y mejorar la experiencia de usuario en tu sitio web.

Preguntas frecuentes

¿Puedo hacer que un elemento sea clickeable solo en ciertas áreas?

Sí, utilizando la propiedad "pointer-events" en combinación con otras propiedades CSS como "clip-path" y "shape-outside", se puede definir exactamente qué áreas de un elemento son clickeables y cuáles no.

¿Qué navegadores admiten la propiedad "pointer-events" en CSS?

La mayoría de los navegadores modernos admiten la propiedad "pointer-events" en CSS, incluyendo Chrome, Firefox, Safari, Opera y Edge.

¿Se puede usar "pointer-events" para hacer elementos no clickeables en dispositivos móviles?

Sí, "pointer-events" funciona tanto en dispositivos móviles como de escritorio.
[nekopost slugs="html-text-en-negrita,mejor-formatero-html,consultas-de-medios-de-ancho-de-ancho-minimo,establecer-una-imagen-de-superposicion-con-color,darken-background-image-css,diferentes-metodos-para-oscurecer-la-imagen-de-fondo-css,hacer-marcador-de-posicion-para-el-cuadro-de-seleccion,puedo-aplicar-el-estilo-css-al-nombre-de-un-elemento,hacer-cursiva-texto-html"]