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