Question Comment puis-je donner un coup de main au curseur lorsque l'utilisateur survole un élément de la liste?


J'ai une liste, et j'ai un gestionnaire de clic pour ses articles:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Comment puis-je changer le pointeur de la souris en un pointeur de la main (comme lorsque je survole un bouton)? En ce moment, le pointeur se transforme en un pointeur de sélection de texte lorsque je survole les éléments de la liste.


1534
2018-06-21 19:45


origine


Réponses:


À la lumière du passage du temps, comme les gens l'ont mentionné, vous pouvez maintenant utiliser en toute sécurité:

li { cursor: pointer; }

2603
2018-06-21 19:50



Vous n'avez pas besoin de jQuery pour cela, utilisez simplement le css suivant:

li {cursor: pointer}

Et voilà! Pratique.


136
2018-06-21 19:47



Utilisez pour li

li:hover{
 cursor: pointer;
}

Voir plus de propriétés de curseur avec exemple après l'exécution de l'option snippet.

enter image description here

.auto            { cursor: auto; }
.deafult         { 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; }



.cursors > div {
   float: left;
   box-sizing: border-box;
  background:#f2f2f2;
  border:1px solid #ccc;
   width: 20%;
   padding: 10px 2px;
   text-align: center;  
   white-space: nowrap;
   &:nth-child(even) {
      background: #eee;     
   }
   &:hover {
      opacity: 0.25
   }
}
<h1>Example of cursor</h1>

<div class="cursors">
    <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>


125
2018-01-04 11:21



li:hover {
    cursor: pointer;
}

Autres valeurs valides hand est ne pas) pour la spécification HTML actuelle peut être consulté ici.


69
2018-01-07 11:50



utilisation

cursor: pointer;
cursor: hand;

si vous voulez avoir un résultat de navigateur!


37
2017-10-27 07:34



CSS:

.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; }

Vous pouvez également avoir le curseur comme image:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

33
2017-09-11 07:51



Ce fil devient incontrôlable, il passe rapidement des curseurs aux instruments à cordes. :)

Heureusement Google m'envoie toujours ici quand j'ai besoin d'un rappel rapide, pour un navigateur croisé complet, utilisez:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46



li:hover {cursor: hand; cursor: pointer;}

16
2018-06-05 21:52



Je pense qu'il serait intelligent de montrer seulement le curseur main / pointeur quand javascript est disponible. Les gens n'auront donc pas l'impression de pouvoir cliquer sur quelque chose qui n'est pas cliquable.

Pour y parvenir, vous pouvez utiliser javascript pour ajouter le CSS à l'élément comme si

$("li").css({"cursor":"pointer"});

ou enchaînez-le directement au gestionnaire de clic.

Ou lorsque modernisateur en combinaison avec <html class="no-js"> est utilisé, le css ressemblerait à ceci

.js li { cursor: pointer; }

16
2018-03-02 12:40