Personalizando el cursor del ratón con CSS

Anterior
Avanzar

¿Quieres personalizar el cursor del ratón cuando pase sobre un elemento con CSS? Entonces estás en el lugar y momento perfecto para conseguirlo, en esta lección aprenderás a controlar la apariencia del cursor de acuerdo al contexto en el que se presente.

Podemos cambiar la típica flechita en un icono interesante, que además le sirva al usuario como una guía o señalización; observa alguno de las formas que solemos encontrarnos cuando navegamos por Internet, las mismas que aprenderemos a implementar.

Personalizando el cursor del ratón

Personalizar el puntero del mouse con CSS es tan simple como identificar el elemento o zona sobre la cual queremos que un tipo de puntero específico se aplique y establecer mediante CSS cual será dicha forma o tipo de cursor.

La propiedad cursor y sus valores

La propiedad cursor nos permite establecer la forma de cursor que queremos sobre nuestro elemento y puede tomar una rica variedad de valores que definen una forma en específico. Conozcamos cuales son:

Principales valores para la propiedad cursor

Existe basta cantidad de posibles valores y a continuación mencionamos algunos de ellos para realizar los ejercicios prácticos, y más adelante nombraremos los demás ordenados en categorías. ¡Vamos!

  • defaul.- es el puntero por defecto, con forma de flecha.
  • help.- cursor de ayuda, con forma de flecha acompañado de un signo de interrogación.
  • crosshair.- puntero en forma de cruz.
  • move.- cursor en forma de cruz pero con flechas en cada extremo.
  • pointer.- en forma de manito con el índice señalando.
Te recomendamos leer:  Cómo usar CSS en HTML y ejemplos

Ejemplo de código para cursor en CSS

Código HTML

<p class="pointer"> Cuando el puntero pase sobre este párrafo, tomará la forma de una una manito con el indice señalando hacia arriba. Es el resultado del valor POINTER para la propiedad cursor</p>

<div class="arrastre"> Este es un contenedor con fondo azul oscuro y cuando el puntero del ratón pase por encima, tomará la forma de una cruz con flechas; es el puntero resultado del valor MOVE para la propiedad cursor.<div>
  

Código CSS

p.pointer {
  cursor:pointer;
  background-color: #9e0b0b; }


div.arrastre {
  cursor: move;
  width: 200px;
  height: 200px;
  background-color: #160654;}

Resultado;

Pera el ejemplo hemos establecido colores de fondo para apreciar mejor visualmente, mientras el ratón se mueva dentro de campo rojo, el puntero tomará forma de una mano con el índice señalando.

Mientras el cursor se mueva dentro del bloque azul, tomara la forma de una cruz con flechas, generalmente se emplea para elementos que admiten arrastrar y soltar.

Valores para personalizar el puntero del ratón con CSS

Existe una variedad de categorías de contenido a las cuales se puede aplicar una cierta forma de puntero.

Si estás en un ordenador entonces:

Para ver la forma del cursor que resulta de cada valor y darte una idea, pasa tu puntero por cada valor que nombraremos a continuación y así deleitarás tus ojos con la diferencia.

Alex

Valores generales

  • auto.-  el navegador determina automáticamente que tipo de cursor mostrar de acuerdo al tipo de elemento que se presente.
  • default.- puntero por defecto, generalmente suele ser una flecha.
  • none.- el cursor desaparece.

AUTO

DEFAULT

NONE

Valores para enlaces y estado

  • context-menu.- indica la presencia de un menú contextual.
  • help.- puntero acompañado de un signo de interrogación, indica que hay ayuda disponible.
  • pointer.- posee forma de mano y generalmente es empleado cuando se pasa sobre enlaces.
  • progress.- este puntero con forma circular, indica que un programa está en progreso o está ocupado en segundo plano pero el usuario aún puede interactuar con la interfaz.
  • wait.- También posee la forma circular, ligeramente mayor al anterior el programa se encuentra trabajando y ocupado (en ocasiones con forma de un reloj de arena).

Valores de cursor para selección

  • Cell.- el cursor celda posee forma de cruz e indica que se puede seleccionar celdas.
  • Crosshair.- cursor cruzado, generalmente para indicar la selección en un mapa de bits
  • Text.- es el conocido cursor que nos permite seleccionar texto.
  • vertical-text.- su forma es similar al cursor de texto pero dispuesto horizontalmente, indica que se puede seleccionar texto vertical.

CELL

CROSSHAIR

TEXT

VERTICl-TEXT

Valores para elementos de arrastrar y soltar con puntero

  • Alias.- este cursor se puede emplear para índica que se debe crear un alias o acceso directo
  • Copy.- este cursor presenta la flecha acompañado de un signo (+) y puede servir para indicar que un elemento puede ser copiado.
  • Move.- posee forma de cruz con flechas, sirve para elementos que pueden ser movidos con el cursor.
  • no-drop.- este tiene la forma de círculo rojo con raja diagonal, indica que no se permite una caída en la ubicación actual
  • not-allowed.- similar al anterior, pero indica que no se puede realizar algo.

ALIAS

COPY

MOVE

NO-DROP

NOT-ALLOWED

Valores para cambiar dimensiones y desplazamientos

  • all-scroll.- indica que se trata de un elemento que se puede desplazar en cualquier dirección.
  • col-resize.- cursor para modificar las dimensiones de las columnas horizontalmente.
  • e-resize.-  cursor dimensionar el borde derecho de un cuadro.
  • ew-resize.- cursor para cambiar dimensiones a izquierda o derecha.
  • n-resize.- puntero para indicar que se puede cambiar el tamaño del borde superior de un cuadro.
  • ne-resize.- cursor que indica que es posible cambiar el tamaño de la esquina superior derecha de un cuadro.
  • nesw-resize.- cursor para cambiar dimensiones en las direcciones superior, derecha, inferior o izquierda.
  • ns-resize.- para cambiar dimensión vertical, es decir superior o inferior.
  • nw-resize.- indica que es posible cambiar el tamaño de la esquina superior izquierda de un cuadro.
  • nwse-resize.- cursor para cambiar el tamaño en las direcciones superior izquierda o inferior derecha
  • row-resize.- para modificar dimensiones de filas en dirección vertical.
  • s-resize.- cursor para cambiar tamaño de borde inferior de un cuadro.
  • se-resize.- cursor para cambiar el tamaño de la esquina inferior derecha de un elemento.
  • sw-resize.- cursor para cambiar el tamaño de la esquina inferior izquierda de un elemento.
  • w-resize.- cursor para modificar las dimensiones del borde izquierdo de un cuadro.

NE-RESIZE

NESW-RESIZE

NS-RESIZE

NW-RESIZE

NWSE-RESIZE

ROW-RESIZE

S-RESIZE

SE-RESIZE

SW-RESIZE

W-RESIZE

Más ejemplos de CSS para personalizar el cursor

Para el ejemplo crearemos varios bloques o contenedores <div> todos con las mismas dimensiones y el mismo color de fondo, lo único en la que cambiará es el estilo del cursor cuando este sobre cada una de ellas. Para ello apuntamos a todos los bloques mediante un selector div y luego apuntaremos a cada bloque mediante su clase (class) para poner un estilo diferente a cada uno.

Código HTML

<div class="defaul"> </div> <br>
<div class="no-drop"> </div><br>
<div class="col-resize"> </div><br>
<div class="ew-resize"> </div><br>
<div class="wait"> </div>

Código CSS

div {
  width: 300px;
  height: 40px;
  background-color:#422aa1;}
div.default {cursor:default;}
div.no-drop {cursor:no-drop;}
div.col-resize {cursor:col-resize;}
div.ew-resize {cursor:ew-resize;}
div.wait {cursor:wait;}

Resultado;

Recomendación final

Utiliza los estilos para cursor del ratón solo en casos necesarios, generalmente los navegares web ya proveen de un estilo por defecto para ciertos elementos como: los textos, enlaces, elementos de arrastre, etc. Así pues emplear innecesariamente estos estilos, más allá de ayudar al usuario puede confundirlo, por lo tanto es recomendable usar siempre y cuando sea necesario.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos