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).

 Cursos Informática Gratuitos