Cambiar el aspecto del puntero. Propiedad CURSOR. | Oloblogger La propiedad CSS CURSOR es la que controla el aspecto del puntero. Por defecto, el valor de esta pr...

27 de octubre de 2011

Cambiar el aspecto del puntero. Propiedad CURSOR.

La propiedad CSS CURSOR es la que controla el aspecto del puntero. Por defecto, el valor de esta propiedad es auto lo que hace que el puntero cambie según el contexto y el tipo de elemento sobre el que se sitúa.

Las formas que estamos más acostumbrados a ver son una flecha (default), una línea vertical para el texto marcable (text) y una mano para los enlaces (hand), pero hay muchos más valores para esta propiedad.

La forma de declarar el estilo del puntero es la misma que la de cualquier otra propiedad CSS, por lo que se puede hacer o en la parte de estilo o bien directamente en la parte HTML.

El primero de estos ejemplos sería para la hoja de estilo y afectaría a todos los elementos que tengan la etiqueta de párrafo (p). El siguiente muestra cómo incluirlo directamente en el HTML y afectaría sólo al párrafo al que se le ha añadido la etiqueta style:

p {cursor: help;}

<p style='cursor:help;'>Texto del párrafo</p>

De igual manera que hemos hecho con el tag para párrafos, podemos cambiar el cursor sólo en una parte del blog, siempre que este esté bajo determinada clase o id:

.post {cursor: help;}
...
<div class="post">Al pasar por encima de este texto, el puntero se verá como un signo de interrogación.</div>

Al pasar por encima de este texto, el puntero se verá como un signo de interrogación.



Estos son los estilos disponibles, aunque muchos sólo son visibles en determinadas circunstancias. Pasando el puntero por encima de los nombres de los valores de esta tabla sombreados en gris, podréis visualizar el aspecto de cada uno.


ValorUtilidad y apariencia
defaultCursor por defecto que suele ser una flecha.
autoEl navegador elige el puntero en función del contexto
[URL]Permite usar un cursor personalizado. La sintaxis es cursor: url(URL_IMAGEN); Si se indican varias direcciones separadas por comas, se usará la que sea funcional, empezando por la izquierda. Conveniente añadir un auto como última opción.
pointerElemento activo seleccionable, como por ejemplo un enlace. Normalmente una mano.
moveIndica que el elemento se puede mover. Una cruz con flechas en las cuatro puntas.
textTexto seleccionable. Normalemente una barra vertical con pequeñas barras en los extremos con forma de I.
waitUn reloj de arena que indica que el usuario debe esperar porque alguna aplicación está a medias o el programa está ocupado.
helpIndica que hay ayuda disponible para el elemento. Usualmente es un signo de interrogación.
handPrácticamente igual que pointer, también se visualiza con una mano.
no-dropSe usa para indicar que un objeto arrastrado no se puede soltar en el lugar dónde este icono aparece. Una señal de prohibición.
not-allowedLa acción solicitada no se puede realizar. También se suele usar un círculo con una barra diagonal atravesándolo.
crosshairUn signo más o una cruz para resaltar un elemento.
vertical-textTexto vertical seleccionable. Una barra horizontal.
aliasIndica un marcador, enlace o alias a otro elemento y tiene el aspecto de una flecha con otra pequeña flecha curva sobre ella.


Para completar la lista, estos otros valores menos usuales:

ValorUtilidad y apariencia
inheritEl elemento hereda el valor de esta propiedad que tuviera el elemento padre.
all-scrollCruz con flechas en todas las puntas que se usa para indicar que el contenido puede moverse en cualquier dirección.
col-resizeSímbolo de redimensión horizontal de una columna. Barra vertical doble con dos flechas en sentidos opuestos.
row-resizeSímbolo de redimensión vertical de una fila. Barra horizontal doble con dos flechas en sentidos opuestos.
n-resizeDiversos valores que se usan para indicar cuando una caja puede ser redimensionada y en qué dirección. Los valores usan el sistema de puntos cardinales en inglés (N, E, S, W) así como los correspondientes intermedios (NE, SE, NW, SW).
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
progressAlguna aplicación sigue cargando pero no afecta a la interacción con la página. Una flecha con un pequeño reloj de arena junto a ellas.
cellPara marcar celdas que pueden ser seleccionadas. Representado por una cruz con los brazos anchos.
copyIndica que el contenido seleccionado puede ser copiado. Una flecha con un signo más dentro.
count-downUsado para indicar una operación de cuenta atrás de un programa.
count-upUsado para indicar una operación de cuenta adelante de un programa.
count-up-downUsado para indicar que un programa está haciendo operaciones de cuenta atrás y adelante en sucesión.
grabUsado para indicar que el contenido es arrastrable. A menudo una mano abierta.
grabbingUsado para indicar que el contenido está siendo arrastrado. A menudo es una mano cerrada.
spinningUsado para indicar que hay un proceso en curso del programa. Algo diferente del valor “wait” — wait debería indicar que el usuario no podrá interactuar con el programa mientras el cursor esté en ese estado mientras spinning indica que el usuario todavía puede seguir interactuando con el programa.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

6 comentarios :

  1. Genial! No sabía que podías modificar el cursor de tantas maneras jeje. Probaré algunas cuantas para ver que tal. Gracias por el código =)

    ResponderEliminar
  2. No hay de qué Olmo Axayacati ;)

    ResponderEliminar
  3. Al principio me parecía una tontería, pero ya lo he usado para un par de detalles. Oloman, cada día soy más fan!

    ResponderEliminar
  4. Muy bien , por aquí seguiremos.

    ResponderEliminar
  5. Las propiedades grab y grabbing necesitan prefijos para cada navegador, pero, que yo sepa, solo las aceptan Webkit y Firefox:
    .div1 {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: auto;
    }
    .div2 {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: auto;
    }

    ResponderEliminar
    Respuestas
    1. Posiblemente. Yo no pude poner el demo en su momento porque no se veía. Si te es necesario ese cursor, echa un vistazo a esta entrada que encontré a vuelapluma ;)

      Eliminar