Tutoriales de css

Cambiar el cursor del Mouse en css
Introducción

Las hojas de estilo poseen una propiedad que permite cambiar la imagen del puntero del mouse.

Listas de cursores

Cursores disponibles por defecto:

Nombre
Muestra
default
crosshair
pointer
move
nw-resize
ne-resize
n-resize
e-resize
help
text
wait
Definiendo el cursor

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>
  <p style="cursor: default">Cursor default</p>
  <p style="cursor: crosshair">Cursor crosshair</p>
  <p style="cursor: pointer">Cursor pointer</p>
  <p style="cursor: move">Cursor move</p>
  <p style="cursor: nw-resize">Cursor nw-resize</p>
  <p style="cursor: ne-resize">Cursor ne-resize</p>
  <p style="cursor: n-resize">Cursor move</p>
  <p style="cursor: e-resize">Cursor move</p>
  <p style="cursor: help">Cursor move</p>
  <p style="cursor: text">Cursor move</p>
  <p style="cursor: wait">Cursor wait</p>
  </body>
</html>


Personalizar cursor

También es posible utilizar un cursor personalizado:



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


Autor: Fabian Muller

Comentarios en "Cambiar el cursor del Mouse en css"

Table 'programa_programas.t_comentarios' doesn't exist