Comment Changer de Curseur en Survol en CSS

Presque tous les sites Web changent les curseurs pour une meilleure expérience utilisateur ou juste pour le plaisir. La personnalisation des curseurs est un moyen simple d’ajouter une touche supplémentaire à votre site Web lorsque vous en avez besoin.

Pour spécifier l'apparence du curseur, utilisez la propriété CSS cursor. Cette propriété est utilisée pour changer le type du cursor de la souris sur les éléments. Cela peut être utile sur les sites web, où différentes actions doivent être effectuées plutôt que de simplement cliquer.

Cet article a pour but de vous aider à contrôler les façons dont un curseur en CSS peut améliorer l'expérience utilisateur.

Nous allons couvrir les moyens suivants pour gérer l’utilisation du curseur:

Comment Faire du Curseur une Main lorsque L'utilisateur Survole un Élément de la Liste

Si vous souhaitez modifier un pointeur de souris en pointeur de main lorsque vous survolez un élément de liste, vous pouvez définir une class pour votre élément de liste (<li>) et définissez le style uniquement pour celui-là.Mais si vous souhaitez un pointeur manuel pour tous les éléments de votre liste, il vous suffit de définir le style de l'élément <<li>>.

Votre code ressemblera à ceci si vous souhaitez définir un pointeur de doigt:

li {
  cursor: pointer;
}

Voyons maintenant un exemple pour illustrer la méthode susmentionnée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li {
        margin-bottom: 15px;
      }
      li.pointer {
        cursor: pointer;
      }
      li:hover {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h4>Passez la souris sur les éléments de la liste pour voir comment le curseur par défaut se transforme en pointeur:</h4>
    <ul>
      <li>Élément de la liste 1 avec le curseur par défaut.</li>
      <li class="pointer">Élément de la liste 2 avec le curseur du pointeur.</li>
      <li>Un autre élément de la liste avec le curseur de la souris par défaut.</li>
    </ul>
  </body>
</html>

Voici un autre exemple de changement de pointeur de curseur. Ici, nous utilisons le sélecteur :nth-child avec nth-child(odd) comme cursor: progress et nth-child(even) comme cursor: pointer pour avoir des types de curseur distincts sur des éléments de liste différents.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li:nth-child(odd) {
        background: #1c87c9;
        cursor: progress;
        width: 50%;
        padding: 5px;
      }
      li:nth-child(even) {
        background: #ccc;
        cursor: pointer;
        width: 50%;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Survolez les éléments de la liste pour voir comment le curseur change:</p>
    <ul>
      <li>Élément de la liste 1</li>
      <li>Élément de la liste 2</li>
      <li>Élément de la liste 3</li>
      <li>Élément de la liste 4</li>
      <li>Élément de la liste 5</li>
      <li>Élément de la liste 6</li>
      <li>Élément de la liste 7</li>
    </ul>
  </body>
</html>

Comment Changer le Curseur d'un Hyperlien en Survol

Il est connu que le curseur par défaut d'un lien hypertexte est défini sur le type de curseur "pointer" lors du survol. Si vous souhaitez le modifier, vous devez spécifier le type de curseur pour l'élément <a> avec le sélecteur CSS :hover.

Pour changer le "pointer" à "default", vous devrez utiliser ce morceau de code:

a:hover {
  cursor: default;
}

Jetez un coup d'œil à cet exemple pour bien comprendre comment utiliser cette méthode:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .link:hover {
        cursor: default;
      }
    </style>
  </head>
  <body>
    <h4>Passez la souris sur l'hyperlien pour voir comment le "pointer" devient "default":</h4>
    <p><a href="https://fr.w3docs.com">W3docs</a> lien avec le type initial "pointer" .</p>
    <p><a class="link" href="https://fr.w3docs.com">W3docs</a> lien avec le type de curseur "default" modifié.</p>
  </body>
</html>

Comme les liens ont color: blue et text-decoration: underline par défaut, nous suggérons de changer les couleurs des liens et d'aller plus loin avec des hyperliens.

Consultez l'article Comment Changer les Couleurs des Liens avec CSS pour faire beaucoup plus avec des liens.

Comment Créer un Effet d'image de Curseur Personnalisé sur un Élément

Faisons plus de plaisir avec les curseurs! Il est possible d’ajouter votre propre image en tant que curseur sur votre page Web.

Définissez la propriété du curseur sur une image après ce morceau de code:

.mycursor {
  /*Remember to set the cursor type to show when the browser can’t use the provided image, otherwise your code will not work.*/
  cursor: url("myimage.png"), pointer;
}
N'oubliez pas de définir le type de curseur à afficher lorsque le navigateur ne peut pas utiliser l'image fournie, sinon votre code ne fonctionnera pas.

C’est un truc amusant à ajouter à votre site Web lorsque les utilisateurs ne s’attendent pas à voir de telles choses. Imaginez que vous avez un formulaire où la réponse correspond à une émotion spécifique, voici l'endroit idéal pour utiliser des images emoji .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        background: #eee;
        text-align: center;
      }
      button {
        display: inline-block;
        background-color: #1c87c9;
        color: #eee;
        margin: 25px;
        position: relative;
        width: 140px;
        height: 45px;
        border-radius: 3px;
        border: none;
        font-size: 1.5em;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #999;
      }
      button:hover {
        background-color: #999;
        color: #ffcc00;
      }
      #happy {
        cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto;
      }
      #sad {
        cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #love {
        cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Quelle est votre impression de notre site web?</h2>
    <button id="happy">Heureux</button>
    <button id="sad">Triste</button>
    <button id="love">Amour</button>
  </body>
</html>

Voyons un autre exemple amusant où les icônes sont utilisées. Vous pouvez utiliser des icônes de sites Web sur lesquels le code Base64 est fourni. Il vous suffit de coller le code Base64 dans la valeur URL du curseur. Vous pouvez également télécharger l’icône sur votre site Web et utiliser l’URL pour définir le curseur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        width: 600px;
        margin: 0.5em auto;
      }
      img {
        width: 280px;
        height: 186px;
        margin: 5px;
        display: inline-block;
        background-position: 50% 50%;
      }
      .dog {
        cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {
        cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .nature {
        cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto;
      }
      .house {
        cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    </style>
  </head>
  <body>
    <img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus" />
    <img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature" />
    <img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog" />
    <img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house" />
  </body>
</html>

Exemple de Tous les Types de Curseurs

Ici, voyez un exemple contenant tous les types possibles qu'un curseur peut avoir.

Pour les valeurs "zoom-in", "zoom-out", "grab" et "grabbing", l'extension de propriété span class="property">-webkit- est ajoutée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 1px solid #666;
        border-radius: 5px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #1c87c9;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .all-scroll {
        cursor: all-scroll;
      }
      .col-resize {
        cursor: col-resize;
      }
      .row-resize {
        cursor: row-resize;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-resize;
      }
      .s-resize {
        cursor: s-resize;
      }
      .w-resize {
        cursor: w-resize;
      }
      .ns-resize {
        cursor: ns-resize;
      }
      .ew-resize {
        cursor: ew-resize;
      }
      .ne-resize {
        cursor: ne-resize;
      }
      .nw-resize {
        cursor: nw-resize;
      }
      .se-resize {
        cursor: se-resize;
      }
      .sw-resize {
        cursor: sw-resize;
      }
      .nesw-resize {
        cursor: nesw-resize;
      }
      .nwse-resize {
        cursor: nwse-resize;
      }
      .grab {
        cursor: -webkit-grab;
        cursor: grab;
      }
      .grabbing {
        cursor: -webkit-grabbing;
        cursor: grabbing;
      }
      .zoom-in {
        cursor: -webkit-zoom-in;
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: -webkit-zoom-out;
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété cursor</h2>
    <p>Passez le curseur de la souris sur l'élément pour voir les modifications:</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>