Comment utiliser la propriété CSS Pointer-Events

Lors de l'élaboration d'un site Web, vous pouvez empêcher les téléspectateurs d'effectuer certaines actions (cliquez / en survol) sur certains éléments du site Web, tels que des images ou des hyperliens. Il pourrait y avoir plusieurs raisons; Par exemple, vous ne voulez pas que l'utilisateur clique sur le lien, car il s'agit d'améliorer la structure de liaison interne du site Web ou de protéger ce qu'il y a dans le lien. Dans de tels scénarios, la propriété CSS Pointer-Events peut être utilisée pour obtenir les résultats requis.

Dans cet article, nous expliquerons comment utiliser la propriété CSS Pointer-Events.

Qu'est-ce que la propriété Pointer-Events?

CSS "événements de pointeur”La propriété spécifie le comportement du pointeur / du robinet vers l'élément HTML et si l'élément sélectionné répondra en effectuant des actions telles que Hover ou Click.

Comment utiliser la propriété Pointer-Events?

Dans CSS, la propriété Pointer-Events peut être utilisée pour activer ou désactiver les actions du pointeur sur certains éléments HTML spécifiques. La syntaxe de la propriété Pointer-Events est donnée ci-dessous.

Syntaxe

Pointer-Events: Aucun | auto;

Dans la syntaxe mentionnée, «auto«Est la valeur par défaut de la propriété Pointer-Events, et elle permet l'action du pointeur vers un élément, et«aucun«Est totalement opposé à l'auto; Il désactive l'action du pointeur sur les éléments HTML.

Passons de l'avant et prenons un exemple pour comprendre la propriété Pointer-Events.

Exemple 1
Dans notre fichier HTML, spécifiez une balise d'ancrage avec le texte "Linuxhint.Io»Et placez-le dans la section du corps.

Html

Linuxhint.Io

Maintenant, nous utiliserons le «événements de pointeur«Propriété et attribuez-lui la valeur»aucun". Cela désactivera l'action du pointeur sur l'élément.

CSS

un
Pointer-Events: Aucun;

Enregistrez votre fichier HTML avec le code mentionné et exécutez-le à l'aide de votre navigateur:

Prenons un autre exemple pour couvrir profondément la propriété des événements de pointeur.

Exemple 2
Définissez la valeur de la propriété d'événements de pointeur sur «auto" ce temps. Il fera répondre à l'élément sur le pointeur en survol ou cliquez. Néanmoins, l'auto est la valeur par défaut de la propriété Pointer-Events.

CSS

un
Pointer-Events: Auto;

Sortir

Nous avons couvert différentes utilisations de la propriété CSS Pointer-Events.

Conclusion

Pour contrôler les actions du pointeur, nous pouvons utiliser le CSS "événements de pointeur" propriété. Le "auto«La valeur est la valeur prédéfinie de cette propriété; il permet les actions sur les éléments HTML. Lorsque la propriété Pointer-Events est utilisée avec la valeur "aucun», Il désactive les actions vers un élément spécifique. Cet article a démontré comment utiliser la propriété CSS Pointer-Events.