Cambiar la apariencia del cursor con CSS

Mapa Web

Portada

Lista de Códigos CSS

Podemos modificar la apariencia del cursor cuando éste se desplaza sobre un vínculo, texto, imágen ... integrando el atributo <style> en la etiqueta del componente.

<A HREF="www.arc3d.net" style="cursor:hand">

Estos son los diferentes tipos de cursores que se pueden utilizar:

       default (flecha)
       crosshair (cruz)
       e-resize (flecha que apunta a la derecha)
       hand (mano)
       help (signo de pregunta)
       move (cruz con flechas en los extremos)
       n-resize (flecha que apunta hacia arriba)
       ne-resize (flecha que apunta al noreste)
       nw-resize (flecha que apunta al noroeste)
       pointer (mano)
       s-resize (flecha que apunta hacia abajo)
       se-resize (flecha que apunta hacia el sudeste)
       sw-resize (flecha que apunta hacia el sudoeste)
       text (I-beam)
       w-resize (flecha que apunta a la izquierda)
       wait (reloj de arena)

Igual que con todas las propiedades CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.

A todo el documento

<html>
<title>Cambio de cursor</title>
<head>
<style type="text/css">

</style>
</head>
<body>
   Hola mundo!
</body>
</html>

A partes del documento

<html>
<title>Cambio de cursor</title>
<head>
</style>
</head>
<body>
   <A HREF="www.arc3d.net" style="cursor:hand">Arc 3D</a>
</body>
</html>

Usar un cursor presonalizado

<html>
<title>Cambio de cursor</title>
<head>
<style type="text/css">

</style>
</head>
<body>
   Hola mundo!
</body>
</html>

Autor: Xavier Bernadí i Millan
http://www.xlwebmasters.com/modules.php?d=doc&f=doc2&id=1128

Portada

Capítulos del Manual de CSS

Introducción a CSS

El Tag LINK

El Tag STYLE y la directiva @import

Comentarios CSS y Reglas Básicas

Agrupación de Selectores y Declaraciones

El Atributo Class y el Atributo ID

Pseudo-clases y Pseudo-elementos

Estructura y Herencia

Especificidad y Estilos en Cascada