Cambiar el cursor del ratón sobre el ratón a estilo de anclaje


Si paso el ratón sobre un div el cursor del ratón se cambiará al cursor como en el ancla HTML.

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

Author: being_ethereal, 2011-08-25

5 answers

Asumiendo que su div tiene un id="myDiv", agregue lo siguiente a su CSS. El cursor: pointer especifica que el cursor debe ser el mismo icono de mano que se usa para anclas (hipervínculos):

CSS para añadir

#myDiv
{
    cursor: pointer;
}

Simplemente puede agregar el estilo del cursor a su HTML de div de la siguiente manera:

<div style="cursor: pointer">

</div>

EDITAR:

Si está decidido a usar jQuery para esto, agregue la siguiente línea a su $(document).ready() o cuerpo onload: (reemplace myClass con cualquier clase su div s compartir)

$('.myClass').css('cursor', 'pointer');
 178
Author: Devin Burke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-26 03:18:29

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

Asumiendo que tienes algo de <div id="target"></div>, puedes usar el siguiente código:

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

Y eso debería bastar.

 21
Author: Ryan Atallah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-25 04:33:47

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;
}
 8
Author: attack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-25 04:15:52

Esto será

#myDiv
{
    cursor: pointer;
}
 4
Author: Sinetheta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-25 04:17:18

Creo que :hover faltaba en las respuestas anteriores. Así que seguir haría lo necesario.(si se requiere css)

#myDiv:hover
{
    cursor: pointer;
}
 0
Author: being_ethereal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-02 15:12:32