Cambiar el cursor con css del ratón

Cómo cambiar el cursor con css al pasar el ratón sobre elementos de la página. Pseudoclase CSS cursor.
Nuestro sistema operativo posee cursores por defecto. Como cursores nos referimos al puntero del ratón: la típica flechita o cualquier otro dibujo que puede tener. En este artículo veremos cómo se puede cambiar el cursor CSS de un elemento de la página, esto es, cambiar la imagen del cursor al posicionarse con el ratón sobre elementos de la página que nosotros queramos.

En Windows podemos encontrar varios cursores que se activan cuando pasamos por “ciertas zonas” de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la típica flechita (denominada default en CSS) cambia por la manito (pointer). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.

Con la ayuda de las hojas de estilo en cascada, podemos forzar a nuestro sistema navegador que no se rija con las normas convencionales de los punteros, logrando así un atractivo diseño web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creación.

Nota: Aunque CSS nos ofrezca la posibilidad de cambiar el aspecto del cursor del ratón, esto es una acción que tenemos que llevar a cabo con bastante cuidado, desde el punto de vista de la usabilidad. Debemos saber que las personas están acostumbradas a visualizar ciertos tipos de cursor en ciertas ocasiones. Por ejemplo, al situarse sobre un enlace aparece siempre la mano, o al ponerse al borde de una ventana el cursor que aparece son la línea con flechas en los lados. Todos estos cursores tienen un significado que las personas conocen y no debemos cambiarlo a la ligera, a no ser que sea para ayudar, porque podemos liar a los usuarios en el uso con la interfaz de la página web.

A continuación presentamos una la lista de los cursores disponibles por defecto en Windows, y que también tendremos disponibles con CSS. En este listado aparece el nombre del cursor (nombre de la pesudoclase CSS que tenemos que utilizar para cambiar el cursor) y el tipo de cursor que se trata.

  • 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)
Al igual que todas las propiedades del lenguaje 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>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: pointer}
-->
</style>
</head>
<body>
</body>
</html>


A algunos sectores del documento:

<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>


También es posible utilizar un cursor personalizado:

<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("find.cur")}
-->
</style>
</head>
<body>
</body>
</html>


Ver ejemplo de cambiar cursor con CSS en marcha

Nota: Tenemos además otro artículo que nos enseña a Cambiar el cursor o puntero del ratón por imágenes personalizadas con CSS

Compartir

Comentarios

DarkXNightmare

15/9/2005
Me gustaria saber algo...
¿Hay alguna forma de agregar esta propiedad a un Archivo Externo?

La rama es:
cursor.html
styles/cursor.css
styles/cursors/my_cursor.cur

Algo como <link rel="stylesheet" type="text/css" href="styles/cursor.css">

y crear un archivo css con...

BODY {
cursor: url("cursors/my_cursor.cur")
}

Lo pregunto porque, lo estoy intentando hacer y no me funciona...
Estaria muy agreadecido si me ayudaran con este Tema...

Sin otro particular, se despide...

DarkXNightmare

Kanino

14/11/2005
Claro que se puede, es mas como lo pusiste esta bien pero hay que tener en cuenta si usas firefox no resultara ya que es solo aplicable para IE

Arkangel

24/1/2006
Aceptar un cursor personalizado es una de las 100 cosas que NO PUEDE HACER Firefox.

Quieranlo o no IExplorer la lleva.

Rigo

10/3/2006
Pregunta!!? y si ademas de cambiar la flechita por uno personalizado, como hago para tambien cambiar el pointer por otro personalizado? GRACIAS!!

victor

10/3/2006
Como hago para cambair el puntero del mouse cuando pasa sobre una imganen, uso javascript en esa imagen para redireccionar y aparece el puntero solo con la flechita ,lo ideal seria la manito.

04/10/2006
que tal victor o que deves hacer es darle por ejemplo un id o class a tu imagen luego con css defines por ejemplo le diste id="imagen"

css

#imagen:hover{cursor:crosshair}
o algo asi...no recurdo bien como va, no lo uso mucho (lo de los cursores) pero la idea es esa...

Rever

08/8/2007
Con firefox si que se puede establecer un cursor personalizado lo que ocurre es que para que aparezca obligatoriamente debemos indicar un cursor alternativo (que en este ejemplo será el puntero por defecto).

De este modo si en vez de esto:
{cursor : url("personalizado.cur")}

Ponemos esto:
{cursor : url("personalizado.cur"),auto;}

Tendremos nuestro cursor personalizado en Firefox.

Por cierto, Firefox es infinitamente mejor que IE...pero bueno eso es otra historia.

daniel

15/4/2009
puntero del raton en IE
Hola a todos.
Os quiero preguntar una cosa del puntero del raton con css. En firefox me funciona poniendo:
body {body {cursor: url("cur.cur"),default}
tambien en probado con auto y funciona, pero, ¿Que hay que hacer para que aparezca en internet explorer, ya que estoy haciendo un proyecto integrado y me lo han pedido que tiene que funcionar tanto en firefox como en internet explorer.
Gracias de antemano

Alfonso

07/11/2009
Yo si pude en Firefox
Estimado Reve vaya que estas pesado, lo intenté como dices y definitivamente si se pudo en Firefox, mis respetos y muchas gracias.

alex

12/11/2009
codigos de cursor hi5 BETA 2010
HABER SI HACEN CODIGOS DE PUNTEROS O CURSORES ANIMADOS QUE FUNCIONE EN VERSION BETA...

pedro

10/2/2010
Cruz
Ola. me gustaria perfeccionar my cruz para un juego de billar asi, seria mas facil apuntar ala bola ;). me podrias decir como mejorarla? muchas gracias

Khaled Al-Asad

22/11/2010
Cursores html
Panchitos

Roberto

25/2/2011
vercion
Cuando intento personaizar el cursor en Firefox de esta forma no me funciona(cursor : url("images/point.cur"),auto;) que es lo que pasa? esto tiene que ver algo con la vercion de Firefox que tengo?? la vercion que tengo es 2.0.0.6

Julia

24/3/2011
cambiar el cursor con css del ratón
Hola me ha gustado vuestro articulo, he encontrado tambien esta forma de < a href="http://www.zonaw.com/2011/03/24/cambiar-el-puntero-del-raton-web/">personalizar el puntero del raton</a> muy buenas las dos


Saludos

Jose Manuel

11/9/2012
Busco algo parecido a unas lineas guia
Pués eso, estoy empleando una serie de mapas y me gustaría que apareciera una especie de líneas guía (x,y),como,por ejemplo,emplea Autocad,muchas gracias.