css - meaning - Convierte el cursor en una mano cuando un usuario se desplaza sobre un elemento de lista
css selector (22)
Tengo una lista y tengo un controlador de clic 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 cursor sobre un botón)? En este momento, el puntero se convierte en un puntero de selección de texto cuando paso sobre los elementos de la lista.
Usando un HTML Hack
Nota: esto no se recomienda ya que se considera una mala práctica.
El ajuste del contenido en una etiqueta de anclaje que contenga un atributo href funcionará sin aplicar explícitamente el cursor: pointer; Propiedad con el efecto secundario de las propiedades de anclaje (modificada con CSS):
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>
A la luz del paso del tiempo, como han mencionado las personas, ahora puede usar de forma segura:
li { cursor: pointer; }
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 puedes 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. Así que la gente no tendrá la sensación de que puede hacer clic en algo que no se puede hacer clic.
Para lograrlo, puede usar javascript para agregar el css al elemento como tal
$("li").css({"cursor":"pointer"});
o encadénelo directamente al controlador de clic.
O cuando se usa modernizer en combinación con <html class="no-js"> , el css se vería así
.js li { cursor: pointer; }
Este hilo se está yendo de las manos, rápidamente pasó de los cursores a los instrumentos de cuerda. :)
Afortunadamente, Google siempre me envía aquí cuando necesito un recordatorio rápido, para un navegador completo, use:
cursor: pointer;
cursor: hand;
Esto debería funcionar
<style>
li:hover{
cursor: hand;
}
</style>
Mira esto, lo consigo desde w3schools.com. Gracias.
<!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>
No necesita jQuery para esto, simplemente use el siguiente css:
li {cursor: pointer}
¡Y voilá! Práctico.
Para poder hacer que cualquier cosa obtenga el tratamiento de "mousechange", puede agregar una clase CSS:
.mousechange:hover {
cursor: pointer;
}
<span class="mousechange">Some text here</span>
No diría que use cursor:hand ya que solo era válido para IE 5.5 e inferior, e IE 6 vino con XP (2002). La gente solo obtendrá la sugerencia de 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): "hand" no es un valor válido para la propiedad "cursor"
Puede utilizar 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: puntero; }
Sólo para estar completo:
cursor: -webkit-grab;
También da una mano, la que usted conoce cuando mueve la vista de una imagen.
Bastante útil si desea emular el comportamiento de agarre usando jquery y mousedown.
Simplemente haz algo como esto:
li {
cursor: pointer;
}
Lo aplico en tu 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 un cursor personalizado, puede crear un icono de mano de 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>
También puedes usar el siguiente estilo.
li {
cursor: grabbing;
}
Todas las otras respuestas sugieren el uso del puntero CSS estándar, sin embargo, hay dos métodos:
Aplicar el
cursor:pointer;propiedad CSScursor:pointer;a los elementos. (Este es el estilo predeterminado cuando un cursor se desplaza sobre un botón).Aplique el
cursor:url(pointer.png);propiedades CSScursor: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 / sistema operativo decida cómo debe ser el puntero del cursor). Tenga en cuenta que se pueden agregar opciones de reserva en caso de que no se encuentre la imagen, incluidas las direcciones URL secundarias o cualquiera de las otras opciones, es decir, elcursor: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;" .
Utilizar para li
li:hover{
cursor: pointer;
}
Ver más propiedades 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
}
}
<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>
para el símbolo básico de la mano: prueba
cursor:pointer
Si quieres un símbolo de mano como arrastrar algún elemento y soltarlo,
tratar
cursor:grab
utilizar
cursor: pointer;
cursor: hand;
Si quieres tener un resultado crossbrowser!
li:hover {
cursor: pointer;
}
here se pueden ver otros valores válidos (cuya hand no es) para la especificación HTML actual.
li:hover {cursor: hand; cursor: pointer;}
ul li:hover{
cursor: pointer;
}
ul li:hover{
cursor: pointer;
}
Para más eventos del mouse verifica la propiedad del cursor CSS