Comment Faire le Curseur Main Quand L’utilisateur Survole un Élément de la Liste

La propriété CSS cursor suggère de nombreuses versions d’un curseur. La propriété CSS cursor est utilisée pour définir le type de curseur de souris, lorsque le pointeur de la souris est au-dessus de l’élément.

Parfois, sur votre page, vous devez faire le curseur main lorsque vous survolez un élément de la liste. Vous pouvez utiliser le mot-clé "grab" de la propriété CSS cursor pour le faire main, lorsque vous survolez la liste des éléments.

Il est très facile, si vous suivez les étapes décrites ci-dessous. Voyons un exemple et essayons de discuter de chaque partie du code.

1. Créez HTML

  • Placez la balise HTML <h2> dans la section . Écrivez-y du contenu.
  • Créez une balise HTML <div> et y écrivez du contenu.
  • Placez la balise HTML <ul>, qui est utilisée pour spécifier une liste non ordonnée, qui regroupe un ensemble d’éléments n’ayant pas d’ordre numérique.
  • Placez quelques balises HTML <li> dans la balise HTML <ul> avec du contenu.
<body>
  <h2>W3docs</h2>
  <div>Un site Web d’information des développeurs, avec des tutoriels et des références relatives au développement web.</div>
  <ul>
    <li>Les livres</li>
    <li>Questionnaires</li>
    <li>Snippets</li>
  </ul>
</body>

2. Ajoutez CSS

  • Utilisez la propriété CSS text-align avec la valeur "center" de la balise HTML <h2>.
  • Pour la balise HTML <li> définissez la marge, en utilisant la propriété CSS margin, qui crée un espace autour de l’élément.
  • Utilisez le sélecteur :hover pour les balises <li> et définissez les modifications à apporter quand vous survolez l’élément.
  • Utilisez la propriété CSS cursor et la valeur "grab", pour indiquer que quelque chose peut être saisi.
h2 {
  text-align: center;
}
li {
  margin: 5px 5px 15px;
}
li:hover {
  cursor: grab;
}

Réunissons les parties du code et voyons comment ça marche!

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>Un site Web d’information des développeurs, avec des tutoriels et des références relatives au développement web.</div>
    <ul>
      <li>Les livres</li>
      <li>Questionnaires</li>
      <li>Snippets</li>
      <li>Les outils</li>
      <li>Fonctions de chaînes</li>
    </ul>
  </body>
</html>

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        width: 100%;
      }
      h2 {
        color: #4287f5;
        text-align: center;
      }
      li {
        list-style-type: none;
        padding: 15px;
        color: #ffffff;
      }
      li:nth-child(odd) {
        background-color: #4287f5;
        cursor: grab;
        width: 50%;
      }
      li:nth-child(even) {
        background-color: #b8bcc2;
        cursor: pointer;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <h2>W3 docs</h2>
    <div>Un site Web d’information des développeurs, avec des tutoriels et des références relatives au développement web..</div>
    <ul>
      <li>Les livres</li>
      <li>Questionnaires</li>
      <li>Snippets</li>
      <li>Les outils</li>
      <li>Fonctions de chaînes</li>
    </ul>
  </body>
</html>

Ici, dans la partie de la CSS, on utilise le sélecteur :nth-child(). Il sélectionne et styles des éléments en fonction de leur index et peut être spécifié par un nombre, un mot-clé, ou une formule. Dans cet exemple, des mots clés "odd" et "even" sont utilisés. On utilise la propriété CSS list-style-type avec la valeur "none". Cette propriété définit le type d’élément de la liste. La valeur "none" signifie que le marqueur ne sera pas affiché.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>Un site Web d’information des développeurs, avec des tutoriels et des références relatives au développement web.</div>
    <ol>
      <li>Les livres</li>
      <li>Questionnaires</li>
      <li>Snippets</li>
      <li>Les outils</li>
      <li>Fonctions de chaînes</li>
    </ol>
  </body>
</html>

Dans cet exemple, on utilise la balise HTML <ol> au lieu de la balise HTML <ul>. Elle est utilisée pour créer une liste ordonnée, qui contient des éléments dans une certaine séquence.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
        text-align: center;
      }
      li {
        margin: 5px 5px 15px;
      }
      li:hover {
        cursor: grab;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <div>Un site Web d’information des développeurs, avec des tutoriels et des références relatives au développement web.</div>
    <ol type="I">
      <li>Les livres</li>
      <li>Questionnaires</li>
      <li>Snippets</li>
      <li>Les outils</li>
      <li>Fonctions de chaînes</li>
    </ol>
  </body>
</html>

Dans cet exemple, avec la balise HTML <ol> on utilise l’attribut "type" avec la valeur "I", qui signifie que les éléments de numérotation sont des nombres majuscules romains. L’attribut "type" définit le type de marqueur de liste.