Cómo usar la propiedad CSS Pointer-Events

Mientras desarrolla un sitio web, es posible que desee restringir a los espectadores que realicen algunas acciones (haga clic/despliegue) en algunos elementos del sitio web, como imágenes o hipervínculos. Podría haber varias razones; Por ejemplo, no desea que el usuario haga clic en el enlace porque es para mejorar la estructura de enlace interna del sitio web o para proteger lo que hay dentro del enlace. En tales escenarios, la propiedad CSS Pointer-Events se puede utilizar para obtener los resultados requeridos.

En este artículo, explicaremos cómo usar la propiedad de eventos de puntero CSS.

¿Qué es la propiedad de Pointer-Events??

CSS "eventos de puntero"La propiedad especifica el comportamiento de puntero/toque hacia el elemento HTML y si el elemento seleccionado responderá realizando acciones como flotar o hacer clic.

Cómo usar la propiedad de eventos de puntero?

En CSS, la propiedad de eventos de puntero se puede utilizar para habilitar o deshabilitar las acciones de puntero en algunos elementos HTML específicos. La sintaxis de la propiedad del puntero-eventos se da a continuación.

Sintaxis

Pointer-Events: Ninguno | auto;

En la sintaxis mencionada, "auto"Es el valor predeterminado de la propiedad de eventos de puntero, y permite la acción del puntero hacia un elemento, y"ninguno"Es totalmente opuesto al auto; Desactiva la acción del puntero en elementos HTML.

Sigamos adelante y tomemos un ejemplo para comprender la propiedad de los eventos del puntero.

Ejemplo 1
En nuestro archivo HTML, especifique una etiqueta de anclaje con el texto "Linuxhint.IO"Y colóquelo dentro de la sección del cuerpo.

Html

Linuxhint.IO

Ahora, usaremos el "eventos de puntero"Propiedad y asignarlo Valor"ninguno". Esto deshabilitará la acción del puntero en el elemento.

CSS

a
Pointer-Events: Ninguno;

Guarde su archivo HTML con el código mencionado y ejecútelo usando su navegador:

Tomemos otro ejemplo para cubrir la propiedad de los eventos de puntero profundamente.

Ejemplo 2
Establezca el valor de la propiedad de los eventos de puntero en "auto" esta vez. Hará que el elemento responda sobre el puntero o haga clic en. No obstante, Auto es el valor predeterminado de la propiedad Pointer-Events.

CSS

a
Pointer-Events: Auto;

Producción

Hemos cubierto diferentes usos de la propiedad CSS Pointer-Events.

Conclusión

Para controlar las acciones del puntero, podemos utilizar el CSS "eventos de puntero" propiedad. El "auto"El valor es el valor predefinido de esta propiedad; Habilita las acciones sobre los elementos HTML. Cuando la propiedad de eventos de puntero se usa con el valor "ninguno", Desactiva las acciones hacia un elemento específico. Este artículo ha demostrado cómo usar la propiedad CSS Pointer-Events.