En este artículo, explicaremos cómo usar la propiedad pointer-events de CSS.
¿Qué es la propiedad pointer-events?
CSS “ puntero-eventos La propiedad ” especifica el comportamiento del puntero/pulsación hacia el elemento HTML y si el elemento seleccionado responderá realizando acciones como pasar el cursor por encima o hacer clic.
¿Cómo usar la propiedad pointer-events?
En CSS, la propiedad pointer-events se puede utilizar para habilitar o deshabilitar acciones de puntero en algunos elementos HTML específicos. La sintaxis de la propiedad pointer-events se proporciona a continuación.
Sintaxis
puntero-eventos : ninguna | auto ;
En la sintaxis mencionada, “ auto ” es el valor por defecto de la propiedad pointer-events, y habilita la acción del puntero hacia un elemento, y “ ninguna ” es totalmente opuesto al auto; deshabilita la acción del puntero en los elementos HTML.
Avancemos y tomemos un ejemplo para comprender la propiedad pointer-events.
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
< a href = “https://www.linuxhint.io/” > LinuxHint.io < / a >Ahora, usaremos el ' puntero-eventos 'propiedad y asignarle valor' ninguna ”. Esto deshabilitará la acción del puntero en el elemento.
CSS
a {puntero-eventos : ninguna ;
}
Guarde su archivo HTML con el código mencionado y ejecútelo usando su navegador:
Tomemos otro ejemplo para cubrir la propiedad pointer-events en profundidad.
Ejemplo 2
Establezca el valor de la propiedad pointer-events en ' auto ' esta vez. Hará que el elemento responda al pasar el puntero o al hacer clic. No obstante, auto es el valor predeterminado de la propiedad pointer-events.
CSS
a {puntero-eventos : auto ;
}
Producción
Hemos cubierto diferentes usos de la propiedad pointer-events de CSS.
Conclusión
Para controlar las acciones del puntero, podemos utilizar el CSS “ puntero-eventos ' propiedad. Los ' auto ” valor es el valor predefinido de esta propiedad; habilita las acciones sobre los elementos HTML. Cuando la propiedad pointer-events se usa con el valor “ ninguna ”, deshabilita las acciones hacia un elemento específico. Este artículo ha demostrado cómo usar la propiedad pointer-events de CSS.