La propiedad cursor no sólo permite seleccionar un puntero entre los disponibles en el sistema operativo (flecha, mano, reloj de arena, redimensionar, etc.) sino que incluso permite indicar la URL de una imagen que se quiere mostrar como puntero personalizado.
Puntero | Navegadores que lo soportan |
---|---|
cursor: default | Todos |
cursor: crosshair | Todos |
cursor: hand | Solo Internet Explorer |
cursor: pointer | Todos salvo Internet Explorer |
cursor:pointer; cursor: hand | Todos |
cursor: move | Todos |
cursor: text | Todos |
cursor: wait | Todos |
cursor: help | Todos |
cursor: n-resize | Todos |
cursor: ne-resize | Todos |
cursor: e-resize | Todos |
cursor: se-resize | Todos |
cursor: s-resize | Todos |
cursor: sw-resize | Todos |
cursor: w-resize | Todos |
cursor: nw-resize | Todos |
cursor: progress | Solo Internet Explorer |
cursor: not-allowed | Solo Internet Explorer |
cursor: no-drop | Solo Internet Explorer |
cursor: vertical-text | Solo Internet Explorer |
cursor: all-scroll | Solo Internet Explorer |
cursor: col-resize | Solo Internet Explorer |
cursor: row-resize | Solo Internet Explorer |
cursor: url(...) | Solo Internet Explorer |
Si deseas cambiar el cursor a una imagen, deberas colocar
{ cursor: url(puntero.svg), url(puntero.cur), pointer }
dentro del CSSdel elemento
Si el navegador soporta las imágenes en formato SVG, el puntero del ratón cambia su aspecto por la imagen puntero.svg. Si el navegador no soporta el formato SVG, intenta cargar la siguiente URL que define un puntero en formato .cur. Si no se puede cargar correctamente, se mostraría el valor preestablecido pointer.