Tengo una lista y tengo un controlador de clics para sus elementos:

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

¿Cómo puedo cambiar el puntero del mouse en un puntero de mano (como al pasar el mouse sobre un botón)? En este momento, el puntero se convierte en un puntero de selección de texto cuando paso el mouse sobre los elementos de la lista.

A la luz del paso del tiempo, como la gente ha mencionado, ahora puede usar con seguridad:

li { cursor: pointer; }

Usar para li:

li:hover {
    cursor: pointer;
}

Vea más propiedades de cursor con ejemplos después de ejecutar la opción de fragmento:

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

No necesita jQuery para esto, simplemente use el siguiente contenido CSS:

li {cursor: pointer}

¡Y voilá! Práctico.

Utilizar:

li:hover {
    cursor: pointer;
}

Otros valores válidos (que handes no ) para la especificación HTML actual se pueden ver aquí .

Utilizar

cursor: pointer;
cursor: hand;

si quieres tener un resultado 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; }

También puede hacer que el cursor sea una imagen:

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

Creo que sería inteligente mostrar solo el cursor de mano / puntero cuando JavaScript esté disponible. Por lo tanto, las personas no tendrán la sensación de que pueden hacer clic en algo que no se puede hacer clic.

Para lograrlo, puede usar la biblioteca JavaScript jQuery para agregar el CSS al elemento así

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

O encadenarlo directamente al controlador de clics.

O cuando se usa el modernizador en combinación con <html class="no-js">, el CSS se vería así:

.js li { cursor: pointer; }

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

Solo para completar:

cursor: -webkit-grab;

También le da una mano, la que conoce cuando mueve la vista de una imagen.

Es bastante útil si desea emular el comportamiento de captura mediante jQuery y mousedown.

Para un navegador cruzado completo, use:

cursor: pointer;
cursor: hand;

Simplemente haz algo como esto:

li { 
  cursor: pointer;
}

Lo aplico en su código para ver cómo funciona:

li {
  cursor: pointer;
}

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

Nota: Además, no olvide que puede tener cualquier cursor de mano con cursor personalizado, puede crear un icono de mano favorito como este, por ejemplo:

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>

Para poder hacer que cualquier cosa reciba el tratamiento "mousechange", puede agregar una clase CSS:

.mousechange:hover {
  cursor: pointer;
}

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

No diría que lo use, cursor:handya que solo era válido para Internet Explorer 5.5 y versiones posteriores, e Internet Explorer 6 vino con Windows XP (2002). Las personas solo recibirán la pista para actualizar cuando su navegador deje de funcionar para ellos. Además, en Visual Studio, se subrayará en rojo esa entrada. Me dice:

Validación (CSS 3.0): "mano" no es un valor válido para la propiedad "cursor"

ul li:hover{
   cursor: pointer;
}

Todas las otras respuestas sugieren usar el puntero CSS estándar, sin embargo, hay dos métodos:

1. Aplica la propiedad CSS cursor:pointer;a los elementos. (Este es el estilo predeterminado cuando un cursor se desplaza sobre un botón).

2. Aplique la propiedad CSS cursor:url(pointer.png);utilizando un gráfico personalizado para su puntero. Esto puede ser más deseable si desea asegurarse de que la experiencia del usuario sea idéntica en todas las plataformas (en lugar de permitir que el navegador / SO decida cómo debería ser el cursor del puntero). Tenga en cuenta que se pueden agregar opciones de reserva en caso de que no se encuentre la imagen, incluidas las URL secundarias o cualquiera de las otras opciones, es decircursor:url(pointer.png,fallback.png,pointer);

Por supuesto, esto puede aplicarse a los elementos de la lista de esta manera li{cursor:pointer;}, como una clase .class{cursor:pointer;}o como un valor para el atributo de estilo de cada elemento style="cursor:pointer;".

Utilizar:

ul li:hover{
   cursor: pointer;
}

Para más eventos del mouse, verifique la propiedad del cursor CSS .

Puede usar uno de los siguientes:

li:hover
{
 cursor: pointer;
}

o

li
{
 cursor: pointer;
}

Ejemplo de trabajo 1:

    li:hover
    {
     cursor: pointer;
    }

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

Ejemplo de trabajo 2:

    li
    {
     cursor: pointer;
    }

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

Puedes usar el siguiente código:

li:hover { cursor: pointer; }

Para un símbolo de mano básico:

Tratar

cursor: pointer 

Si desea un símbolo de mano como arrastrar algún elemento y soltarlo, intente:

cursor: grab

También puede usar el siguiente estilo:

li {
    cursor: grabbing;
}

Usando un Hack HTML

Nota: esto no se recomienda ya que se considera una mala práctica.

Ajustar el contenido en una etiqueta de anclaje que contenga un hrefatributo funcionará sin aplicar explícitamente la cursor: pointer;propiedad con el efecto secundario de las propiedades de anclaje (modificado con CSS):

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

Comprueba lo siguiente. Lo obtengo 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>

simplemente usando CSS para configurar personalizar el puntero del cursor

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;

manifestación

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

imagen hand.cur

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