English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les propriétés de curseur CSS, utilisées pour définir le type de curseur (c'est-à-dire le pointeur de la souris) lorsque la souris est déplacée sur une zone ou un lien sur une page Web.
Les navigateurs affichent généralement le pointeur de la souris sur n'importe quelle partie vide du site Web, les mains gantées sur n'importe quel lien ou élément cliquable, et le curseur d'édition sur n'importe quel texte ou champ de texte. Avec CSS, vous pouvez redéfinir ces attributs pour afficher différents curseurs.
h1 {
cursor: move;
}
p {
cursor: text;
}Vérifiez et voyez‹/›Le tableau suivant montre la plupart des curseurs acceptés par la plupart des navigateurs. Placez le pointeur de la souris sur le lien "TEST" de la colonne de sortie pour afficher le curseur.
| Voir | 值 | Exemple | Voir |
|---|---|---|---|
| default | a:hover{cursor:default;} | Tester | |
| pointer | a:hover{cursor:pointer;} | Tester | |
| text | a:hover{cursor:text;} | Tester | |
| wait | a:hover{cursor:wait;} | Tester | |
| help | a:hover{cursor:help;} | Tester | |
| progress | a:hover{cursor:progress;} | Tester | |
| crosshair | a:hover{cursor:crosshair;} | Tester | |
| move | a:hover{cursor:move;} | Tester | |
| url() | a:hover{cursor:url("custom.cur"), default;} | Tester |
Il peut également avoir un curseur entièrement personnalisé.
cursor attribut traite la liste de valeurs de curseurs utilisateur définis par des virgules, suivie deCurseur universelSi le premier curseur spécifié est incorrect ou introuvable, le prochain curseur de la liste, séparé par des virgules, sera utilisé, et ainsi de suite, jusqu'à ce qu'un curseur disponible soit trouvé.
Si aucun curseur utilisateur n'est défini ou s'il n'est pas pris en charge par le navigateur, le curseur universel à la fin de la liste sera utilisé.
Astuce :Le format standard utilisable pour les curseurs est le format .cur. Cependant, vous pouvez utiliser des logiciels de conversion d'images en ligne gratuits pour convertir des images telles que .jpg en .gif en format .cur.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}Vérifiez et voyez‹/›Dans l'exemple ci-dessus, custom.gif, custom.cur sont les fichiers de curseurs personnalisés téléchargés sur votre espace de serveur, et default est le curseur universel. Si le curseur personnalisé est perdu ou si le navigateur du lecteur ne le prend pas en charge, ce curseur universel sera utilisé.
Attention :Pour déclarer un curseur personnalisé, il doit être défini à la fin de la listeCurseur universelSinon, ce curseur personnalisé ne pourra pas être affiché correctement.
Voici une démonstration en direct du curseur personnalisé.
Attention : IE9Et les versions précédentes ne prennent en charge que les valeurs d'URL de curseurs statiques .cur et d'animations .ani. Cependant, les navigateurs tels que Firefox, Chrome et Safari prennent en charge .cur, .png, .gif et .jpg, mais pas .ani.