Tipos de cursores del ratón en CSS

Tipos de cursores del ratón en CSS

En algunas ocasiones seguro que has necesitado mostrar el cursor del ratón de forma diferente para ponérselo más fácil al usuario. Con CSS, a través de la propiedad cursor: valor; podemos conseguirlo. A continuación os detallamos cada valor posible que puede recibir el cursor. Si vas colocando el ratón encima de cada bloque verás el resultado de cada uno:

cursor:context-menu;
cursor:help;
cursor:pointer;
cursor:progress;
cursor:wait;
cursor:cell;
cursor:crosshair;
cursor:text;
cursor:vertical-text;
cursor:alias;
cursor:copy;
cursor:move;
cursor:no-drop;
cursor:not-allowed;
cursor:all-scroll;
cursor:col-resize;
cursor:e-resize;
cursor:ew-resize;
cursor:n-resize;
cursor:ne-resize;
cursor:nesw-resize;
cursor:ns-resize;
cursor:nw-resize;
cursor:nwse-resize;
cursor:row-resize;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:w-resize;
cursor:none;

Cuando creamos un enlace con <a href=””></a> el cursor automáticamente será pointer. Si tu enlace es con el evento onclick, verás que el cursor no cambia, en este caso lo ideal es que lo pongas en cursor: pointer; (no uses hand porque es un valor que sólo lo soporta Internet Explorer). No obstante, estos efectos pueden variar dependiendo del navegador que estés usando.

Entradas relacionadas
Cómo añadir CSS en nuestra web

En nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros […]

Leer más
Estilos CSS, ¿qué son y para qué sirven?

Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son […]

Leer más
10 trucos que deberías saber de Coda 2

10 tips que te ayudarán a usar Coda 2 de una manera más eficiente.

Leer más

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *