J'ai une liste et j'ai un gestionnaire de clics pour ses éléments:

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

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

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

li { cursor: pointer; }

Utiliser pour li:

li:hover {
    cursor: pointer;
}

Voir plus de propriétés de curseur avec des exemples après avoir exécuté l'option d'extrait:

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

.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 contenu CSS suivant:

li {cursor: pointer}

Et voilà! Pratique.

Utilisation:

li:hover {
    cursor: pointer;
}

D'autres valeurs valides (qui ne lehand sont pas ) pour la spécification HTML actuelle peuvent être consultées ici .

Utilisation

cursor: pointer;
cursor: hand;

si vous voulez avoir un résultat crossbrowser!

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 faire en sorte que le curseur soit une image:

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

Je pense qu'il serait intelligent de n'afficher le curseur main / pointeur que lorsque 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 la librairie JavaScript jQuery pour ajouter le CSS à l'élément comme ceci

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

Ou enchaînez-le directement au gestionnaire de clics.

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

.js li { cursor: pointer; }

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

Juste pour être complet:

cursor: -webkit-grab;

Il donne également un coup de main, celui que vous connaissez lorsque vous déplacez la vue d'une image.

Il est très utile si vous souhaitez émuler le comportement de capture à l'aide de jQuery et de mousedown.

Pour un navigateur croisé complet, utilisez:

cursor: pointer;
cursor: hand;

Faites simplement quelque chose comme ceci:

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>

Remarque: Aussi Ne pas oublier que vous pouvez avoir un curseur main avec le curseur personnalisé, vous pouvez créer icône de main fav comme celui - 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>

Pour pouvoir faire quoi que ce soit 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 cursor:handcar il n'était valable que pour Internet Explorer 5.5 et inférieur, et Internet Explorer 6 est livré avec Windows XP (2002). Les utilisateurs obtiendront un indice de mise à niveau uniquement lorsque leur navigateur cessera de fonctionner pour eux. De plus, dans Visual Studio, il soulignera cette entrée en rouge. Ça me dit:

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

ul li:hover{
   cursor: pointer;
}

Toutes les autres réponses suggèrent d'utiliser le pointeur CSS standard, cependant, il existe deux méthodes:

1. Appliquez la propriété CSS cursor:pointer;aux éléments. (Il s'agit du style par défaut lorsqu'un curseur survole un bouton.)

2. Appliquez la propriété CSS à l' cursor:url(pointer.png);aide d'un graphique personnalisé pour votre pointeur. Cela peut être plus souhaitable si vous voulez vous assurer que l'expérience utilisateur est identique sur toutes les plates-formes (au lieu de permettre au navigateur / OS de décider à quoi devrait ressembler votre curseur). Notez que des options de secours peuvent être ajoutées au cas où l'image ne serait pas trouvée, y compris les URL secondaires ou l'une des autres options, par exemplecursor:url(pointer.png,fallback.png,pointer);

Bien sûr, ceux-ci peuvent être appliqués aux éléments de la liste de cette manière li{cursor:pointer;}, en tant que classe .class{cursor:pointer;}ou en tant que valeur pour l'attribut style de chaque élément style="cursor:pointer;".

Utilisation:

ul li:hover{
   cursor: pointer;
}

Pour plus d'événements de souris, vérifiez la propriété du curseur CSS .

Vous pouvez utiliser l'une des options suivantes:

li:hover
{
 cursor: pointer;
}

ou

li
{
 cursor: pointer;
}

Exemple de travail 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Exemple de travail 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Vous pouvez utiliser le code ci-dessous:

li:hover { cursor: pointer; }

Pour un symbole de main de base:

Essayer

cursor: pointer 

Si vous voulez un symbole de main comme faire glisser un élément et le déposer, essayez:

cursor: grab

Vous pouvez également utiliser le style suivant:

li {
    cursor: grabbing;
}

Utiliser un hack HTML

Remarque: ceci n'est pas recommandé car il est considéré comme une mauvaise pratique

Envelopper le contenu dans une balise d'ancrage contenant un hrefattribut fonctionnera sans appliquer explicitement la cursor: pointer;propriété avec l'effet secondaire des propriétés d'ancrage (modifié avec CSS):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

Vérifiez les points suivants. Je l'obtiens de W3Schools .

<!DOCTYPE html>
<html>
    <head>
        <style>
        .alias {cursor: alias;}
        .all-scroll {cursor: all-scroll;}
        .auto {cursor: auto;}
        .cell {cursor: cell;}
        .context-menu {cursor: context-menu;}
        .col-resize {cursor: col-resize;}
        .copy {cursor: copy;}
        .crosshair {cursor: crosshair;}
        .default {cursor: default;}
        .e-resize {cursor: e-resize;}
        .ew-resize {cursor: ew-resize;}
        .grab {cursor: -webkit-grab; cursor: grab;}
        .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
        .help {cursor: help;}
        .move {cursor: move;}
        .n-resize {cursor: n-resize;}
        .ne-resize {cursor: ne-resize;}
        .nesw-resize {cursor: nesw-resize;}
        .ns-resize {cursor: ns-resize;}
        .nw-resize {cursor: nw-resize;}
        .nwse-resize {cursor: nwse-resize;}
        .no-drop {cursor: no-drop;}
        .none {cursor: none;}
        .not-allowed {cursor: not-allowed;}
        .pointer {cursor: pointer;}
        .progress {cursor: progress;}
        .row-resize {cursor: row-resize;}
        .s-resize {cursor: s-resize;}
        .se-resize {cursor: se-resize;}
        .sw-resize {cursor: sw-resize;}
        .text {cursor: text;}
        .url {cursor: url(myBall.cur),auto;}
        .w-resize {cursor: w-resize;}
        .wait {cursor: wait;}
        .zoom-in {cursor: zoom-in;}
        .zoom-out {cursor: zoom-out;}
        </style>
    </head>

    <body>
        <h1>The cursor property</h1>
        <p>Mouse over the words to change the mouse cursor.</p>

        <p class="alias">alias</p>
        <p class="all-scroll">all-scroll</p>
        <p class="auto">auto</p>
        <p class="cell">cell</p>
        <p class="context-menu">context-menu</p>
        <p class="col-resize">col-resize</p>
        <p class="copy">copy</p>
        <p class="crosshair">crosshair</p>
        <p class="default">default</p>
        <p class="e-resize">e-resize</p>
        <p class="ew-resize">ew-resize</p>
        <p class="grab">grab</p>
        <p class="grabbing">grabbing</p>
        <p class="help">help</p>
        <p class="move">move</p>
        <p class="n-resize">n-resize</p>
        <p class="ne-resize">ne-resize</p>
        <p class="nesw-resize">nesw-resize</p>
        <p class="ns-resize">ns-resize</p>
        <p class="nw-resize">nw-resize</p>
        <p class="nwse-resize">nwse-resize</p>
        <p class="no-drop">no-drop</p>
        <p class="none">none</p>
        <p class="not-allowed">not-allowed</p>
        <p class="pointer">pointer</p>
        <p class="progress">progress</p>
        <p class="row-resize">row-resize</p>
        <p class="s-resize">s-resize</p>
        <p class="se-resize">se-resize</p>
        <p class="sw-resize">sw-resize</p>
        <p class="text">text</p>
        <p class="url">url</p>
        <p class="w-resize">w-resize</p>
        <p class="wait">wait</p>
        <p class="zoom-in">zoom-in</p>
        <p class="zoom-out">zoom-out</p>
    </body>
</html>

il suffit d'utiliser CSS pour définir personnaliser le pointeur du curseur

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

démo

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

image de hand.cur

li:hover{
   cursor: url("../icons/hand.cur"), pointer;
}