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.

Deja un comentario

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