Cambie el cursor del mouse sobre el mouse sobre un estilo similar a un ancla

109

Si coloco el mouse sobre un, divel cursor del mouse se cambiará al cursor como ese en el ancla HTML.

¿Cómo puedo hacer esto? ¿Necesito Javascript o es posible solo con CSS?

javascript css mouse astutamente
fuente

Respuestas:

221

Suponiendo que divtiene una id="myDiv", agregue lo siguiente a su CSS. Las cursor: pointerespecifica que el cursor debe ser el mismo icono de la mano que es el uso de anclas (hipervínculos):

CSS para agregar

#myDiv
{
    cursor: pointer;
}

Simplemente puede agregar el estilo del cursor a su divHTML de esta manera:

<div style="cursor: pointer">

</div>

EDITAR:

Si está decidido a usar jQuery para esto, agregue la siguiente línea a su $(document).ready()cuerpo o onload: (reemplace myClasscon cualquier clase todos sus divrecursos compartidos)

$('.myClass').css('cursor', 'pointer');
Devin Burke
fuente
Quiero hacer esto con jquery no css
shbly
7
@guru: No hay necesidad de programar. Todo lo que necesita hacer es agregar style="cursor: pointer"a su divHTML. Editaré mi respuesta con un ejemplo.
Devin Burke
Hay cinco divisiones con la misma clase, no puedo agregar a todo esto "style =" cursor: pointer "
shbly
@guru, si todos los div tienen la misma clase, entonces puede agregar "cursor: pointer" a la regla CSS para esa clase en el archivo CSS de su página
ataque
1
si el problema es de focalización, entonces como Justin ya preguntó, y como todos siempre tienen que preguntar, PUBLIQUE EL CÓDIGO para que podamos ayudarlo a adjuntarlo
Sinetheta
24

Si desea hacer esto en jQuery en lugar de CSS, básicamente sigue el mismo proceso.

Suponiendo que tiene algunos <div id="target"></div>, puede usar el siguiente código:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

y eso debería hacerlo.

Ryan Atallah
fuente
3
Esto es superfluo porque el cursor para a solodiv es visible cuando el mouse está sobre él. No hay ninguna razón para eliminarlo una vez que el usuario se desplaza hacia afuera porque el cursor no se verá en ese momento de todos modos.
Devin Burke
2
Si bien la pregunta se hizo de manera muy restringida (sobre los DIV), esta respuesta se aplica ampliamente. Es útil para cualquier elemento HTML como tablas, <p>, botones, etc. Por eso hice +1 en él.
PeteH
10

En realidad, no necesitas jQuery, solo CSS. Por ejemplo, aquí hay algo de HTML:

<div class="special"></div>

Y aquí está el CSS:

.special
{
    cursor: pointer;
}
ataque
fuente
6

Esta voluntad

#myDiv
{
    cursor: pointer;
}
Sinetheta
fuente
0

Creo que :hoverfaltaba en las respuestas anteriores. Entonces, seguir haría lo necesario. (Si se requiere css)

#myDiv:hover
{
    cursor: pointer;
}
being_ethereal
fuente
Funcionó para mí sin el: hover, y presumiblemente muchos más, ya que la respuesta tiene muchos votos positivos. ¿Lo intentaste?
84
sí, ignore esta respuesta
being_ethereal