¿Cómo puedo hacer que el cursor sea una mano cuando un usuario se desplaza sobre un elemento de la lista?

Tengo una lista y tengo un manejador de clics para sus artículos:

  • foo
  • goo

¿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 sobrevivo los elementos de la lista.

A la luz del paso del tiempo, como las personas han mencionado, ahora puede usar de forma segura:

 li { cursor: pointer; } 

Usar para li

 li:hover{ cursor: pointer; } 

Vea más propiedad del cursor con el ejemplo después de ejecutar la opción de fragmento.

enter image description here

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

Example of cursor

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

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

 li {cursor: pointer} 

¡Y voilá! Práctico.

 li:hover { cursor: pointer; } 

Otros valores válidos (qué hand no es) para la especificación de HTML actual se pueden ver aquí .

utilizar

 cursor: pointer; cursor: hand; 

si quieres tener un resultado de navegador cruzado

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

Este hilo se está yendo de las manos, pasó rápidamente de los cursores a los instrumentos de cuerda. 🙂

Afortunadamente, Google siempre me envía aquí cuando necesito un recordatorio rápido, para un navegador cruzado completo, use:

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

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

Para lograr eso, puedes usar javascript para agregar el CSS al elemento como tal

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

o encadenarlo directamente al controlador de clics.

O cuando se utiliza el modernizador en combinación con , el CSS se vería así

 .js li { cursor: pointer; } 

Solo para completar:

 cursor: -webkit-grab; 

también da una mano, la que conoces al mover la vista de una imagen.

Muy útil si quieres emular el comportamiento de agarre usando jquery y mousedown.

enter image description here

 ul li:hover{ cursor: pointer; } 

Para poder hacer que cualquier cosa obtenga el tratamiento “mousechange”, puede agregar una clase CSS:

 .mousechange:hover { cursor: pointer; } 
 Some text here 

Simplemente haz algo como esto:

 li { cursor: pointer; } 

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

 li { cursor: pointer; } 
 
  • foo
  • goo
 ul li:hover{ cursor: pointer; } 

para obtener más eventos del mouse, verifique la propiedad CSS del cursor

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

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

  2. Aplicar el cursor:url(pointer.png); propiedad CSS cursor:url(pointer.png); usando un gráfico personalizado para su puntero. Esto puede ser más conveniente si desea asegurarse de que la experiencia del usuario sea idéntica en todas las plataformas (en lugar de permitir que el navegador / sistema operativo decida cuál debería ser el cursor del puntero). Tenga en cuenta que las opciones de repliegue se pueden agregar en caso de que no se encuentre la imagen, incluidas las URL secundarias o cualquiera de las otras opciones, es decir cursor:url(pointer.png,fallback.png,pointer);

Por supuesto, estos pueden 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;" .

para símbolo de mano básico: prueba

 cursor:pointer 

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

tratar

 cursor:grab 

Puede usar uno de los siguientes:

 li:hover { cursor: pointer; } 

o

 li { cursor: pointer; } 

Ejemplo de trabajo 1:

  li:hover { cursor: pointer; } 
 
  • foo
  • bar

También puedes usar el siguiente estilo

 li { cursor: grabbing; } 

Puedes usar el siguiente código

li: hover {cursor: puntero; }

Usando un Hack HTML

Nota: esto no es recomendable, ya que se considera una mala práctica

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

Esto debería funcionar