Comment afficher un curseur en forme de main en CSS

Définissez cursor: pointer; sur un élément que les utilisateurs peuvent activer pour afficher le curseur familier en forme de main lorsqu’ils le survolent. Les liens utilisent souvent déjà ce curseur ; la même règle convient aux boutons et aux commandes interactives personnalisées. Servez-vous-en pour renforcer le signal d’une action, pas pour donner l’impression qu’un élément décoratif est cliquable.

Définir la propriété CSS cursor sur pointer

Ajoutez cette déclaration au sélecteur du lien, du bouton ou d’un autre élément interactif. L’exemple JavaScript suivant affiche la règle CSS d’un bouton, que vous pouvez copier dans une feuille de style. La sortie correspond au texte de la règle CSS.

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

Cette page complète montre également la règle appliquée à un lien et à un bouton. Le texte visible du lien, du bouton et de la section reste en anglais dans l’exemple. Adaptez les sélecteurs à votre propre balisage.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

La valeur pointer est le mot-clé CSS qui affiche le curseur en forme de main. Un lien doté d’un href valide l’affiche généralement par défaut ; une règle explicite est donc souvent superflue pour les liens ordinaires. Les boutons sont eux aussi des commandes interactives : leur appliquer cette règle rend le signal cohérent avec celui des liens. Si un élément personnalisé réagit à un clic, associez ce signal à une sémantique appropriée et à un comportement accessible au clavier ; le curseur, à lui seul, ne rend pas un élément accessible ni interactif.

Choisissez un sélecteur qui ne cible que les commandes permettant d’effectuer une action. Par exemple, une règle générale button s’applique aux boutons natifs, tandis qu’une classe comme .open-panel peut cibler une commande personnalisée précise. Évitez d’attribuer pointer à tous les éléments ou à du texte qui ressemble seulement à une commande : ce signal visuel laisse penser que l’élément peut être activé. Assurez-vous que l’action reste réellement accessible par un lien ou un bouton, et utilisez le style du curseur comme indication complémentaire. Si une autre règle CSS remplace cette déclaration, examinez les sélecteurs correspondants et la cascade dans votre feuille de style.

Utiliser une image de curseur personnalisée avec une valeur de repli

Pour utiliser une image à la place du curseur standard en forme de main du navigateur, définissez la valeur de cursor avec url() suivi d’un mot-clé de repli. Par exemple, cursor: url("/images/hand-cursor.png"), pointer; demande au navigateur d’utiliser /images/hand-cursor.png, puis de revenir à pointer si l’image ne peut pas être chargée ou utilisée. Placez l’image à ce chemin sur votre site, ou modifiez l’URL pour indiquer son emplacement réel. Une URL relative dans une feuille de style externe est résolue par rapport à cette feuille de style, tandis qu’une URL dans du CSS en ligne est résolue par rapport à l’URL de base du document : un chemin manquant ou incorrect empêche l’affichage de l’image personnalisée, mais la valeur de repli fournit toujours le curseur standard en forme de main. Vous pouvez utiliser auto comme valeur de repli si vous préférez le curseur habituel du navigateur pour cet élément. Conservez cette valeur de repli dans la déclaration afin que les utilisateurs disposent toujours d’un curseur clair si l’image est indisponible.