Ho un elenco e ho un gestore di clic per i suoi elementi:

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

Come posso cambiare il puntatore del mouse in un puntatore a mano (come quando si passa con il mouse sopra un pulsante)? In questo momento il puntatore si trasforma in un puntatore di selezione del testo quando passo con il mouse sugli elementi dell'elenco.

Alla luce del passare del tempo, come hanno già detto le persone, ora puoi tranquillamente usare:

li { cursor: pointer; }

Utilizzare per li:

li:hover {
    cursor: pointer;
}

Vedi più proprietà del cursore con esempi dopo aver eseguito l'opzione snippet:

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

Per questo non è necessario jQuery, è sufficiente utilizzare il seguente contenuto CSS:

li {cursor: pointer}

E voilà! Maneggevole.

Uso:

li:hover {
    cursor: pointer;
}

Altri valori validi (che handè non ) per la specifica HTML corrente possono essere visualizzate qui .

Uso

cursor: pointer;
cursor: hand;

se vuoi avere un risultato 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; }

Puoi anche avere il cursore come un'immagine:

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

Penso che sarebbe intelligente mostrare il cursore mano / puntatore solo quando JavaScript è disponibile. Quindi le persone non avranno la sensazione di poter fare clic su qualcosa che non è selezionabile.

Per ottenere ciò, è possibile utilizzare la jQuery libary JavaScript per aggiungere CSS all'elemento in questo modo

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

O concatenalo direttamente al gestore dei clic.

O quando viene utilizzato il modernizzatore in combinazione con <html class="no-js">, il CSS apparirebbe così:

.js li { cursor: pointer; }

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

Solo per completezza:

cursor: -webkit-grab;

Dà anche una mano, quella che conosci quando sposti la vista di un'immagine.

È abbastanza utile se si desidera emulare il comportamento di cattura usando jQuery e mousedown.

Per un browser incrociato completo, utilizzare:

cursor: pointer;
cursor: hand;

Fai semplicemente qualcosa del genere:

li { 
  cursor: pointer;
}

Lo applico sul tuo codice per vedere come funziona:

li {
  cursor: pointer;
}

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

Nota: inoltre, NON dimenticare che puoi avere qualsiasi cursore della mano con cursore personalizzato, puoi creare un'icona della mano preferita come questa, ad esempio:

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>

Per poter fare in modo che qualsiasi cosa ottenga il trattamento "mousechange", puoi aggiungere una classe CSS:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

Non direi di usarlo cursor:handpoiché era valido solo per Internet Explorer 5.5 e versioni precedenti e Internet Explorer 6 veniva fornito con Windows XP (2002). Le persone riceveranno il suggerimento per l'aggiornamento solo quando il loro browser smette di funzionare per loro. Inoltre, in Visual Studio, sottolinea in rosso quella voce. Mi dice:

Convalida (CSS 3.0): "mano" non è un valore valido per la proprietà "cursore"

ul li:hover{
   cursor: pointer;
}

Tutte le altre risposte suggeriscono di utilizzare il puntatore CSS standard, tuttavia esistono due metodi:

1. Applica la proprietà CSS cursor:pointer;agli elementi. (Questo è lo stile predefinito quando un cursore passa sopra un pulsante.)

2. Applicare la proprietà CSS cursor:url(pointer.png);utilizzando un grafico personalizzato per il puntatore. Ciò può essere più desiderabile se si desidera garantire che l'esperienza utente sia identica su tutte le piattaforme (invece di consentire al browser / sistema operativo di decidere come dovrebbe apparire il cursore del puntatore). Si noti che è possibile aggiungere opzioni di fallback nel caso in cui l'immagine non venga trovata, inclusi gli URL secondari o una qualsiasi delle altre opzioni, ad escursor:url(pointer.png,fallback.png,pointer);

Naturalmente questi possono essere applicati agli elementi della lista in questo modo li{cursor:pointer;}, come una classe .class{cursor:pointer;}o come valore per l'attributo di stile di ciascun elemento style="cursor:pointer;".

Uso:

ul li:hover{
   cursor: pointer;
}

Per altri eventi del mouse, controlla la proprietà cursore CSS .

Puoi usare uno dei seguenti:

li:hover
{
 cursor: pointer;
}

o

li
{
 cursor: pointer;
}

Esempio di lavoro 1:

    li:hover
    {
     cursor: pointer;
    }

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

Esempio di lavoro 2:

    li
    {
     cursor: pointer;
    }

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

Puoi usare il codice qui sotto:

li:hover { cursor: pointer; }

Per un simbolo della mano di base:

Provare

cursor: pointer 

Se vuoi un simbolo a mano come trascinare un oggetto e rilasciarlo, prova:

cursor: grab

Puoi anche usare il seguente stile:

li {
    cursor: grabbing;
}

Utilizzando un hack HTML

Nota: questo non è raccomandato in quanto è considerato una cattiva pratica

L'avvolgimento del contenuto in un tag anchor contenente un hrefattributo funzionerà senza applicare esplicitamente la cursor: pointer;proprietà con l'effetto collaterale delle proprietà anchor (modificato con CSS):

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

Verifica quanto segue. Ho capito da 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>

solo usando CSS per impostare personalizzare il puntatore del cursore

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;

dimostrazione

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

immagine hand.cur

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