CSS - Curseurs

La propriété de curseur de CSS vous permet de spécifier le type de curseur qui doit être affiché à l'utilisateur.

Une bonne utilisation de cette propriété consiste à utiliser des images pour les boutons d'envoi sur les formulaires. Par défaut, lorsqu'un curseur survole un lien, le curseur passe d'un pointeur à une main. Cependant, il ne change pas le formulaire pour un bouton d'envoi sur un formulaire. Par conséquent, chaque fois que quelqu'un survole une image qui est un bouton d'envoi, cela fournit un indice visuel que l'image est cliquable.

Le tableau suivant montre les valeurs possibles pour la propriété du curseur -

N ° Sr. Valeur et description
1

auto

La forme du curseur dépend de la zone de contexte sur laquelle il se trouve. Par exemple, un I sur un texte, une main sur un lien, etc.
2

crosshair

Un réticule ou signe plus
3

default

Une flèche
4

pointer

Une main pointée (dans IE 4 cette valeur est main)
5

move

La barre I
6

e-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers la droite (est)
sept

ne-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et vers la droite (nord / est)
8

nw-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut et vers la gauche (nord / ouest)
9

n-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le haut (nord)
dix

se-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et vers la droite (sud / est)
11

sw-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas et vers la gauche (sud / ouest)
12

s-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers le bas (sud)
13

w-resize

Le curseur indique qu'un bord d'une boîte doit être déplacé vers la gauche (ouest)
14

text

La barre I
15

wait

Un sablier
16

help

Un point d'interrogation ou un ballon, idéal pour une utilisation sur les boutons d'aide
17

<url>

La source d'un fichier image de curseur

NOTE- Vous devriez essayer de n'utiliser que ces valeurs pour ajouter des informations utiles aux utilisateurs, et à certains endroits, ils s'attendraient à voir ce curseur. Par exemple, utiliser le réticule lorsque quelqu'un survole un lien peut dérouter les visiteurs.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

Il produira le résultat suivant -