html - punteros - cambiar el cursor al puntero del dedo

manita en css

Question

Tengo este y no sé si necesito insertarlo en "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 algún lado 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.

Answer 1

Agregue un atributo href para que sea un enlace válido y return false; en el controlador de eventos para evitar que cause una navegación;

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

(O haga que displayData() devuelva false y ..="return displayData(.. )

Answer 2

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

Por lo tanto, esto solo funcionará en el tamaño de 128 X 128, cualquiera más grande y la imagen no se cargará. ¡Pero puedes usar prácticamente cualquier imagen que desees! Esto se consideraría puro css3 y algunos html. todo lo que tienes que hacer en html es

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

y solo en ese div, ese cursor se mostrará. Así que generalmente lo agrego a la etiqueta corporal.

Answer 3

Creo que la "mejor respuesta" anterior, aunque programáticamente precisa, en realidad no responde 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 alguna parte y 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. Desconcierta por qué se hizo esto.

Puede que no haya nada de malo en el enlace del consultante. considere el siguiente html:

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

Cuando el mouse de un usuario está sobre este enlace, el puntero no cambiará a una mano ... en cambio, el puntero se comportará como si se moviera 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 tienes muchos de estos, o utilizas este tipo de cosas por todas partes y decides hacer algún tipo de cambio o encontrarte con un error. mejor hacer una clase de CSS para ello:

a.lendhand {
  cursor: pointer;
}

entonces:

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

hay muchas otras formas que podrían decirse que son mejores que este método. DIV s, BUTTON s, IMG s, etc. pueden ser más útiles. Sin embargo, no veo ningún daño al usar <a>...</a> .

jarett.

Answer 4

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 en este tema no tiene el atributo href estático normal, solo está llamando 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í, en general, para enlaces normales que no exigen JS, es mejor trabajar con CSS puro sin JS).

Answer 5

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

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

Answer 6

Puedes hacer esto en CSS:

a.menu_links {
    cursor: pointer;
}

Este es en realidad el comportamiento predeterminado para los enlaces. Debes haberlo anulado de alguna manera en otro lugar en tu CSS, o no hay ningún atributo href (falta en tu ejemplo).

Answer 7

en css escribir

a.menu_links:hover{ cursor:pointer}

Answer 8

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