Użyj dla li

li:hover{
 cursor: pointer;
}

Zobacz więcej właściwość cursor z przykładem po uruchomieniu opcji 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>

Nie wymagasz do tego jQuery, po prostu użyj następującego css:

li {cursor: pointer}

li:hover {
    cursor: pointer;
}

Inne ważne wartości (które hand to , a nie) dla bieżącej specyfikacji HTML można wyświetlić tutaj .

Użyj

cursor: pointer;
cursor: hand;

Jeśli chcesz mieć wynik 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; }

Możesz również mieć kursor jako obrazek:

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

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

Myślę, że byłoby mądrze pokazywać kursor ręki/wskaźnika tylko wtedy, gdy javascript jest dostępny. Więc ludzie nie będą mieli poczucia, że mogą kliknąć coś, co nie jest klikalne.

Aby to osiągnąć, możesz użyć javascript, aby dodać css do elementu tak

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

Lub połącz go bezpośrednio z obsługą kliknięć.

Lub gdy używany jest modernizer w połączeniu z <html class="no-js">, css wyglądałby tak

.js li { cursor: pointer; }

Ten wątek wymyka się spod kontroli, szybko przeszedł od kursorów do instrumentów smyczkowych. :)

Na szczęście Google zawsze wysyła mnie tutaj, gdy potrzebuję szybkiego przypomnienia, dla pełnego cross browser, użyj:

cursor: pointer;
cursor: hand;

Tylko dla kompletności:

cursor: -webkit-grab;

Daje również rękę, którą znasz podczas przesuwania widoku obrazu.

Całkiem przydatne, jeśli chcesz emulować zachowanie grab używając jquery i mousedown.

ul li:hover{
   cursor: pointer;
}

Aby móc sprawić, że cokolwiek stanie się "mousechange", możesz dodać klasę CSS:

.mousechange:hover {
  cursor: pointer;
}

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

Nie powiedziałbym, aby używać cursor:hand, ponieważ było to ważne tylko dla IE 5.5 i poniżej, a IE 6 przyszedł z XP (2002). Ludzie otrzymają podpowiedź, aby uaktualnić tylko wtedy, gdy ich przeglądarka przestanie dla nich działać. Dodatkowo w Visual Studio na Czerwono podkreśli ten wpis. Mówi mi:

Walidacja (CSS 3.0): "hand" nie jest poprawną wartością dla "kursor" własność

Po prostu zrób coś takiego:

li { 
  cursor: pointer;
}

Stosuję go na Twoim kodzie, aby zobaczyć, jak to działa:

li {
  cursor: pointer;
}

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

Uwaga: również nie zapominaj, że możesz mieć dowolny kursor z niestandardowym kursorem, możesz utworzyć ikonę ulubionych dłoni, taką jak ta na przykład:

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>

ul li:hover{
   cursor: pointer;
}

Aby uzyskać więcej zdarzeń myszy sprawdź właściwość CSS cursor

Wszystkie inne odpowiedzi sugerują użycie standardowego wskaźnika CSS, jednak istnieją dwie metody:

1. Zastosuj właściwość CSS cursor:pointer; do elementów. (Jest to domyślny styl, gdy kursor znajduje się nad przyciskiem.)

2. Zastosuj właściwość CSS cursor:url(pointer.png); za pomocą niestandardowej grafiki dla wskaźnika. Może to być bardziej pożądane, jeśli chcesz mieć pewność, że doświadczenie użytkownika jest identyczne na wszystkich platformach (zamiast zezwalać przeglądarce / OS zdecydować, jaki wskaźnik kursor powinien wyglądać). Zauważ, że opcje awaryjne mogą być dodane w przypadku, gdy obraz nie został znaleziony, w tym drugorzędne adresy URL lub którejkolwiek z innych opcji, np. cursor:url(pointer.png,fallback.png,pointer);

Oczywiście mogą one być stosowane do elementów listy w ten sposób li{cursor:pointer;}, jako klasa .class{cursor:pointer;} lub jako wartość atrybutu stylu każdego elementu style="cursor:pointer;".

Możesz użyć jednej z następujących opcji:

li:hover
{
 cursor: pointer;
}

Lub

li
{
 cursor: pointer;
}

Przykład roboczy 1:

    li:hover
    {
     cursor: pointer;
    }

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

Przykład roboczy 2:

    li
    {
     cursor: pointer;
    }

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

Dla podstawowego symbolu ręki: try

cursor:pointer 

Jeśli chcesz mieć symbol ręki, jak przeciągnij jakiś przedmiot i upuść go,

Try

cursor:grab

Możesz również użyć następującego stylu

li {
      cursor: grabbing;
   }

Możesz użyć poniższego kodu

Li: hover { cursor: pointer;}

Używanie Hacka HTML

UWAGA: nie jest to zalecane, ponieważ jest uważane za złą praktykę

Owijanie zawartości znacznikiem kotwicy zawierającym atrybut href będzie działać bez jawnego stosowania właściwości cursor: pointer; z efektem ubocznym właściwości kotwicy (zmienionym CSS):

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

Zobacz to, dostaję to od w3schools.com dzięki.

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

To powinno zadziałać

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