w3school - css wiki




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

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

li { cursor: pointer; }

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.


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

Cela devrait fonctionner

<style>
li:hover{
    cursor: hand;
}
</style>

Il suffit de faire quelque chose comme ça:

li { 
  cursor: pointer;
}

Je l'applique sur votre code pour voir comment cela fonctionne:

li {
  cursor: pointer;
}
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Note: Aussi, n'oubliez pas que vous pouvez avoir n'importe quel curseur de la main avec un curseur personnalisé, vous pouvez créer une icône de main favorite comme celle-ci par exemple:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}
<div>
</div>


Juste pour l'exhaustivité:

cursor: -webkit-grab;

donne également une main, celle que vous connaissez lorsque vous déplacez la vue d'une image.

Très utile si vous voulez émuler un comportement de saisie en utilisant jquery et mousedown.


Pour pouvoir faire n'importe quoi obtenir le traitement "mousechange", vous pouvez ajouter une classe CSS:

.mousechange:hover {
  cursor: pointer;
}
<span class="mousechange">Some text here</span>

Je ne dirais pas d'utiliser le cursor:hand car il n'était valide que pour IE 5.5 et ci-dessous, et IE 6 est venu avec XP (2002). Les gens n'auront que l'indice de mise à niveau lorsque leur navigateur cesse de fonctionner pour eux. En outre, dans Visual Studio, il rouge soulignera cette entrée. Ça me dit:

Validation (CSS 3.0): "hand" n'est pas une valeur valide pour la propriété "cursor"


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.

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


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

li {cursor: pointer}

Et voilà! Pratique.


pour le symbole de la main de base: essayez

cursor:pointer 

Si vous voulez un symbole de la main, faites glisser un objet et déposez-le,

essayer

cursor:grab

utilisation

cursor: pointer;
cursor: hand;

si vous voulez avoir un résultat de navigateur!


li:hover {
    cursor: pointer;
}

D'autres valeurs valides (dont la hand n'est pas ) pour la spécification HTML actuelle peuvent être consultées here .


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





css