Punteros del ratón con CSS

25/Oct/2007 CSS 3 Comentarios
Ejemplos Programación CSS

Gracias a la especificación CSS vamos a poder modificar las propiedades referentes al puntero del ratón. Y, de esta forma, tener múltiples formas de ver los punteros del ratón con CSS. Estas formas las podremos ir modificando atendiendo al elemento sobre el que estemos. Es decir, no es lo mismo que queramos modificarlo para ofrecer una ayuda, para poder indicarle que el objeto se puede mover por la página o que podemos seleccionar un contenido. Las posibilidades son muchas.

Lo que tenemos que saber para modificar el puntero del ratón es que deberemos de utilizar la propiedad cursor que tiene la siguiente sintaxis:

cursor : [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]

Dentro de los valores  que se le asignan encontramos algunos como:

  • crosshair, con un estilo de cruz para poder seleccionar un punto en una imagen.
  • pointer, es el cursor que se suele utilizar sobre los enlaces y que tiene forma de mano.
  • move, cursor que se mostraría cuándo un elemento puede ser movido dentro de la página.
  • text, cursor que muestra una barra para que el texto pueda ser seleccionado.
  • wait, cursor que indica que el se están haciendo cálculos en el programa y este está ocupado.
  • help, cursor que nos sirve para indicar que hay ayuda asociada al elemento sobre el que estamos posicionados.
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, cursores para hacer redimensionado de elementos hacía diferentes posiciones.
  • default, cursor por defecto, normalmente es una flecha.

Para aplicárselo a un elemento HTML, utilizaremos el elemento style. Por ejemplo, vamos a aplicárselo a un enlace, es decir, a un elemento del tipo a:

<a href="#" style="cursor:crosshair;">Enlace</a>

De esta forma tan sencilla hemos podido configurar los punteros del ratón con CSS. ¿Cuál de los punteros del ratón has utilizado o tienes planteado utilizar en los diseños de tus páginas web?

Vídeos sobre CSS


3 comentarios en “Punteros del ratón con CSS”

Víctor Cuervo

anibal

perdon por volver a escribir pero se pone el codigo completo o se omiten los ultimos renglones

Víctor Cuervo

Víctor Cuervo

@anibal,

¿A que últimos renglones te refieres?
He puesto un enlace a un código más actualizado, por si te es de utilidad.

Víctor Cuervo

RECE

QUISIERA CODIGOS DE JAVA PARA PAGINAS WEB

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*