Línea de Código
Aprende a Programar

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?

Publicaciones relacionadas:

Cursor personalizado en CSS Borde con líneas discontinuas Tachar texto con CSS Definir el ancho de una capa con CSS Ocultar celdas vacías