cambiar el cursor al puntero del dedo


234

Tengo esto ay no sé si necesito insertarlo en el "onmouseover" para que el cursor cambie al puntero del dedo como un enlace normal:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Leí en alguna parte que necesito poner:

onmouseover="cursor: hand (a pointing hand)"

Pero no está funcionando para mí.

Además, no estoy seguro de si esto se considera JavaScript, CSS o simplemente HTML.


es CSS y el evento onmouseover es un evento de JavaScript.
Scott

No pones css directamente en onmouseover = "". Además, el cursor: mano al pasar el mouse sobre el enlace debe ser la acción predeterminada. Si esto no está sucediendo, puede haber otro problema a la mano.
Tanque



3
jajaja "Mano ..... una mano que señala!" jaja lo siento, no pude resistirme.
Christine

Respuestas:


458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

Es css.

O en una hoja de estilo:

a.menu_links { cursor: pointer; }

2
Después de probar esto, parece que es necesario tener onmouseover = "" AND style = cursor: pointer; ". Si solo tiene la etiqueta de estilo, el cursor del puntero desaparecerá / predeterminado al puntero estándar después de la interacción con un clic. Buen post Scott, gracias.
Nubtacular

1
@DnfD solo necesita el onmouseoversi no hay href definición. Si, como un ancla estándar, no es una hrefdefinición, el onmouseoverno es necesario.
Scott

@DnfD la respuesta aceptada es realmente horrible. hace el trabajo, pero no está claro. quitar mouseover=""y style="cursor: pointer;"dejarlo class="menu_links" funcionará! independientemente de si hrefestá allí o no.
Jarett Lloyd

@ Scott no, no necesitas el mouseoverevento allí. ver mi comentario anterior a DnfD
Jarett Lloyd

@JarettLloyd depende mucho del soporte del navegador y la construcción de CSS. Esta es una respuesta de 2012 . Las cosas han cambiado en más de 6 años.
Scott

52

Puedes hacer esto en CSS:

a.menu_links {
    cursor: pointer;
}

Este es realmente el comportamiento predeterminado para los enlaces. Debe haberlo anulado de alguna manera en otra parte de su CSS, o no hay ningún hrefatributo allí (falta en su ejemplo).


no tengo un href porque no quiero salir de la página. es un enlace que activa una función JS y si inserto href = "#" lo estropea y recarga la página incorrecta
Dvir Levy

2
@DvirLevy - Entonces devuelva false y use href="#", o simplemente use el CSS como le he mostrado ...
Joseph Silber

22

Me gusta usar este si solo tengo un enlace en la página:

onMouseOver="this.style.cursor='pointer'"


7

Aquí hay algo genial si quieres hacer un esfuerzo adicional con esto. en la url, puede usar un enlace o guardar una imagen png y usar la ruta. por ejemplo:

url ('assets / imgs / theGoods.png');

a continuación está el código:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Entonces, esto solo funcionará por debajo del tamaño 128 X 128, más grande y la imagen no se cargará. ¡Pero prácticamente puedes usar cualquier imagen que quieras! Esto se consideraría puro css3 y algo de html. todo lo que tienes que hacer en html es

<div class='cursor'></div>

y solo en ese div, se mostrará ese cursor. Por lo general, lo agrego a la etiqueta del cuerpo.


6

Creo que la "mejor respuesta" anterior, aunque programáticamente precisa, en realidad no responde a la pregunta planteada. la pregunta pregunta cómo cambiar el puntero en el evento mouseover. Veo publicaciones sobre cómo uno puede tener un error en algún lugar que no responde la pregunta. En la respuesta aceptada, el evento mouseover está en blanco (onmouseover="" ) y la opción de estilo, en cambio, está incluida. Desconcertante por qué se hizo esto.

Puede que no haya nada malo con el enlace del investigador. considere el siguiente html:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Cuando un usuario pasa el mouse sobre este enlace, el puntero no cambiará a una mano ... en cambio, el puntero se comportará como si estuviera sobre el texto normal. Uno podría no querer esto ... y entonces, el puntero del mouse necesita que le digan que cambie.

La respuesta que se busca es esta (que fue publicada por otro):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Sin embargo, esto es ... una pesadilla si tiene muchos de estos, o usa este tipo de cosas en todo el lugar y decide hacer algún tipo de cambio o encontrarse con un error. mejor hacer una clase CSS para ello:

a.lendhand {
  cursor: pointer;
}

luego:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

Hay muchas otras formas que serían, posiblemente, mejores que este método. DIV s, BOTONES s, IMG s, etc. pueden resultar más útiles. Sin <a>...</a>embargo, no veo daño en el uso .

jarett


4

Agregue un hrefatributo para convertirlo en un enlace válido y return false;en el controlador de eventos para evitar que provoque una navegación;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(O hacer que la displayData()devolución sea falsa y ..="return displayData(..)


3

La solución a través de CSS puro como se menciona en la respuesta marcada como la mejor no es adecuada para esta situación.

El ejemplo de este tema no tiene el atributo href estático normal, solo llama a JS, por lo que no hará nada sin JS.

Por lo tanto, es bueno activar el puntero solo con JS. Entonces, solución

onMouseOver="this.style.cursor='pointer'"

como se mencionó anteriormente (pero no puedo comentar allí) es el mejor en este caso. (Pero sí, generalmente, para enlaces normales que no requieren JS, es mejor trabajar con CSS puro sin JS).


-1

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.