Valide une date grégorienne
Découvrez comment contrôler le comportement des événements de souris sur les éléments HTML avec la propriété CSS pointer-events. Ce tutoriel vous explique tout ce que vous devez savoir pour l'utiliser efficacement.
La propriété CSS pointer-events permet de contrôler le comportement des événements de souris (clic, survol, etc.) sur les éléments HTML.
La syntaxe générale de la propriété pointer-events est la suivante :
selector { pointer-events: value; }
Valeurs par défaut | auto |
---|---|
Inherited: | oui |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.pointerEvents="none" |
Les valeurs possibles pour la propriété pointer-events sont les suivantes :
Voici quelques exemples pratiques d'utilisation de la propriété pointer-events :
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La propriété CSS pointer-events</title> <style> .box { width: 200px; height: 200px; background-color: #f1c40f; border: 1px solid #e67e22; padding: 20px; text-align: center; font-size: 24px; margin: 50px; cursor: pointer; } .disabled { pointer-events: none; background-color: #bdc3c7; border: 1px solid #7f8c8d; cursor: default; } </style> </head> <body> <h1>La propriété pointer-events css</h1> <div class="box disabled">Cliquez-moi !</div> </body> </html>
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La propriété CSS pointer-events</title> <style> .box { width: 200px; height: 200px; background-color: #f1c40f; border: 1px solid #e67e22; padding: 20px; text-align: center; font-size: 24px; margin: 50px; cursor: pointer; } .disabled { pointer-events: none; background-color: #bdc3c7; border: 1px solid #7f8c8d; cursor: default; } </style> </head> <body> <h1>La propriété pointer-events css</h1> <div style="position: relative;"> <div class="box">Cliquez-moi !</div> <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color:# 000;"></div> </div> </body> </html>
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>La propriété CSS pointer-events</title> <style> .box { width: 400px; height: auto; background-color: #f1c40f; border: 1px solid #e67e22; padding: 20px; text-align: center; font-size: 24px; margin: 50px; cursor: pointer; } .disabled { pointer-events: none; background-color: #bdc3c7; border: 1px solid #7f8c8d; cursor: default; } </style> </head> <body> <h1>La propriété pointer-events css</h1> <div style="position: relative;"> <div style="position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background-color: rgba(255, 255, 255, 0.5); pointer-events: none;"></div> <div class="box">Selecionner le txte:
This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</div> </div> </body> </html>
Voici quelques astuces et conseils pour utiliser au mieux la propriété pointer-events :
Comme nous l'avons démontré plus haut, le principal cas d'utilisation des événements de pointeur consiste à permettre au comportement de clic ou de tapotement de "traverser" un élément pour atteindre un autre élément situé en dessous sur l'axe des Z. Cela peut être utile, par exemple, pour les superpositions graphiques ou pour masquer des éléments avec opacité (par exemple, les infobulles) tout en permettant la sélection de texte dans le contenu situé en dessous.
"L'utilisation d'événements de pointeur en CSS pour les éléments non-SVG est expérimentale. Cette fonctionnalité faisait partie du projet de spécification CSS3 UI mais, en raison de nombreuses questions en suspens, elle a été reportée à CSS4." - Mozilla MDN
"Si vous ajoutez un récepteur d'événement de clic à un élément, puis supprimez le style pointer-events (ou changez sa valeur en auto), l'événement de clic déclenchera la fonctionnalité désignée. En fait, l'événement de clic respecte la valeur de pointer-events." - David Walsh
En conclusion, la propriété CSS pointer-events est un outil très utile pour contrôler le comportement des événements de souris sur les éléments HTML. En comprenant comment elle fonctionne et en l'utilisant judicieusement, vous pouvez améliorer l'expérience utilisateur de vos sites web.
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 2 | 11 | 3.6 | 4 | 9 |