Cambiar la apariencia del cursor con 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">
<!–
body {cursor: hand}
–>
</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">
<!–
body {cursor : url("salta.cur")}
–>
</style>
</head>
<body>
    Hola mundo!
</body>
</html> 

 

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

Leave A Comment?