Personalizando el cursor del ratón con CSS

¿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 cuál 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 cuáles 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.

Ejemplo de código para cursor en CSS

<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>
  

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:

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.

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.

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ñada 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.

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.

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.

<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>

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.

[popup_anything id=»4273″]