Tipos de cursores del ratón en CSS
27/04/2012
Dejar un comentario
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.