CSS: Changer l'apparence du curseur

La propriété curseur vous permet de modifier l'apparence du curseur sur un élément d'une page Web.

Le client affichera automatiquement sur son ordinateur le curseur qui correspond au type de curseur que vous avez choisi.

Exemple

Exemple de curseur en forme de croix (réticule):

 corps {curseur: réticule; } 

On peut bien sûr donner différents styles à plusieurs éléments de la même page

Exemple de style en forme de croix sur le style "body" orné d'une forme de sablier sur les images et de la main sur les liens.

 corps {curseur: réticule; } img {cursor: wait; } a: lien {curseur: pointeur; } 

Liste d'attributs possibles

Accepté par tous les navigateurs

  • Self: L'apparence identique au curseur par défaut sur la balise ayant l'attribut ne change pas.
  • Par défaut: navigateur par défaut du curseur.
  • Pointeur: Main en forme de curseur avec son doigt déplié.
  • Texte: édition de texte par curseur.
  • Aide: aide du curseur.
  • Wait: Wait Cursor
  • Progression: progression du curseur.
  • Déplacer: mouvement du curseur.
  • Réticule: croix en forme de curseur.

Redimensionnement des curseurs

  • N-redimensionner: redimensionne le curseur en bas.
  • S-redimensionner: redimensionner le curseur de haut en bas.
  • E-redimensionner: redimensionne le curseur de gauche à droite.
  • W-resize: redimensionne le curseur de droite à gauche.
  • Ne pas redimensionner: redimensionnez le curseur en bas à gauche et en haut à droite.
  • Nw-resize: Redimensionnez le curseur en bas à droite et en haut à gauche.
  • Se-redimensionner: redimensionne le curseur en haut à gauche.
  • Sw-resize: redimensionne le curseur de haut en bas à gauche.
    • Notez que: En fait, il est facile de se souvenir de toutes ces propriétés à la fois.
    • n, s, e, w correspondent au nord, au sud, à l'est et à l'ouest, c'est-à-dire en haut, en bas, à droite, à gauche.
    • Indiquez simplement la direction dans laquelle le curseur pointe, suivi bien sûr de "-resize".

Non supporté par tous les navigateurs

Firefox et Opera, ignorez les instructions suivantes.

  • Hériter: Même en tant que balise parent du curseur.
  • Non autorisé: Barré arrondi en forme de curseur.
  • No-drop: Curseur en forme de main avec les doigts et un barré rond déplié.
  • Col-redimensionner: le curseur est constitué de deux lignes verticales avec une flèche de chaque côté.
  • Row-redimensionner: Cursor est deux lignes horizontales avec une flèche de chaque côté.
Article Précédent Article Suivant

Les Meilleurs Conseils