Peut ne pas être Changements de pointeur de souris La propriété est la plus répandue dans le monde, mais reste un outil utile pour les développeurs. Bien que les navigateurs modifient automatiquement les pointeurs de certains objets, tels que les liens et certains éléments rétractables, les développeurs peuvent obtenir de meilleurs résultats. Sélectionnez le pointeur de la souris Ce que vous voulez spécifiquement.
Changer la forme de la souris en CSS
L'apparence du curseur est contrôlée par la propriété CSS Avec le curseur. Contrôle Cette propriété est dans le type de pointeur Ce qui est fourni lorsque l'utilisateur rencontre l'objet. Par exemple, si vous faites glisser la souris sur l'objet associé à la catégorie ci-dessous, vous obtenez une flèche de déplacement à quatre directions:
.cursor { cursor: move;} Lorsque vous déplacez la souris sur l'objet, l'utilisateur voit un indicateur comme le curseur ci-dessous.
Options de curseur standard en CSS
Il existe une large gamme d'options de curseur que vous pouvez ajuster pour utiliser dans le curseur. Notez que "NEt SEt WEt E"Ce que vous voyez dans la liste fait référence aux tendances de base du Nord, du Sud, de l'Est et de l'Ouest. Par exemple , curseur: e-redimensionner; La poignée de redimensionnement apparaît avec une flèche sur le côté "Est" ou à droite.
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;} Chris Koueller, le magicien derrière CSS-Tricks.com ، Doodles Pour aider à montrer différentes options de curseur en CSS.
Utilisez les images comme pointeur de la souris
Comme beaucoup de propriétés CSS, la propriété de curseur peut prendre des attributs dans la spécification d'URL. Par exemple, la classe ci-dessous utilisera l'image associée au pointeur.
.cursor {cursor: url('path/to/image.png'), auto;} La sélection automatique est alors un indicateur de sauvegarde. L'attribut auto montrera n'importe quel indicateur que le navigateur utilisera normalement pour l'objet actuel sous le curseur. Vous pouvez également spécifier des images supplémentaires avec une liste séparée par des virgules ou spécifier tout indicateur utilisé comme indicateur de sauvegarde.
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;} Les animations, qu'elles soient au format GIF, SVG ou PNG, ne sont pas prises en charge par les navigateurs. Mais les PNG transparents fonctionnent dans tous les navigateurs Web populaires sur le marché aujourd'hui. On ne peut pas compter sur les SVG dans Firefox, mais ils fonctionnent bien dans les autres navigateurs.
Par défaut, le "point chaud" du curseur sera défini dans le coin supérieur gauche de l'image. Pour faire référence à un "hotspot" différent, sélectionnez une paire de coordonnées. (X, Y) Dans l'appel du curseur. Cet exemple ci-dessous définira le point effectif comme (3, 3) , Utilisation du coin supérieur droit (0, 0).
.cursor {cursor: url(cursor.svg) 3 3, pointer;} Conclusion: utilisez ces attributs
Si vous développez un site Web, vous pouvez ajouter ces propriétés CSS à n’importe quel objet de votre site pour modifier le curseur que l’utilisateur voit lorsque vous survolez cet objet. Si vous êtes plus aventureux, vous pouvez également utiliser une extension de navigateur telle que Style ou TamperMonkey ou Mécano Effectuer CSS sur n'importe quel site Web. De cette façon, vous pouvez afficher votre curseur personnalisé quand et où vous voulez.
