Unidad 17. Estilos CSS Avanzados (X)

17.10. Controles de ratón

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratón cuando se sitúa sobre una etiqueta afectada por esta propiedad CSS.

Puedes aplicarla sobre párrafos, enlaces o incluso sobre el body mismo (así el cursor tendrá una forma personalizada en toda la página).

 

El modo en el que se utiliza es igual que el resto, pero empleando la propiedad cursor:

p { cursor: pointer; } 

Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, se-resize, sw-resize, w-resize, nw-resize, text, wait y help.

 

Aquí tienes un ejemplo de cada uno de los cursores. Sitúa el ratón sobre ellos para ver el efecto:

auto crosshair pointer move text wait help
n-resize ne-resize e-resize se-resize sw-resize w-resize nw-resize

También podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis:

p { cursor: url(graficos/micursor.cur), auto; }

Para que funcione en IE, debemos empelar imágenes de cursor (extensión .cur).

Pág. 17.10

Atrás  Inicio  Adelante