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>
...
<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.
| Valor | Utilidad y apariencia |
|---|---|
| default | Cursor por defecto que suele ser una flecha. |
| auto | El 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. |
| pointer | Elemento activo seleccionable, como por ejemplo un enlace. Normalmente una mano. |
| move | Indica que el elemento se puede mover. Una cruz con flechas en las cuatro puntas. |
| text | Texto seleccionable. Normalemente una barra vertical con pequeñas barras en los extremos con forma de I. |
| wait | Un reloj de arena que indica que el usuario debe esperar porque alguna aplicación está a medias o el programa está ocupado. |
| help | Indica que hay ayuda disponible para el elemento. Usualmente es un signo de interrogación. |
| hand | Prácticamente igual que pointer, también se visualiza con una mano. |
| no-drop | Se 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-allowed | La acción solicitada no se puede realizar. También se suele usar un círculo con una barra diagonal atravesándolo. |
| crosshair | Un signo más o una cruz para resaltar un elemento. |
| vertical-text | Texto vertical seleccionable. Una barra horizontal. |
| alias | Indica 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:
| Valor | Utilidad y apariencia |
|---|---|
| inherit | El elemento hereda el valor de esta propiedad que tuviera el elemento padre. |
| all-scroll | Cruz con flechas en todas las puntas que se usa para indicar que el contenido puede moverse en cualquier dirección. |
| col-resize | Símbolo de redimensión horizontal de una columna. Barra vertical doble con dos flechas en sentidos opuestos. |
| row-resize | Símbolo de redimensión vertical de una fila. Barra horizontal doble con dos flechas en sentidos opuestos. |
| n-resize | Diversos 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 | |
| progress | Alguna 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. |
| cell | Para marcar celdas que pueden ser seleccionadas. Representado por una cruz con los brazos anchos. |
| copy | Indica que el contenido seleccionado puede ser copiado. Una flecha con un signo más dentro. |
| count-down | Usado para indicar una operación de cuenta atrás de un programa. |
| count-up | Usado para indicar una operación de cuenta adelante de un programa. |
| count-up-down | Usado para indicar que un programa está haciendo operaciones de cuenta atrás y adelante en sucesión. |
| grab | Usado para indicar que el contenido es arrastrable. A menudo una mano abierta. |
| grabbing | Usado para indicar que el contenido está siendo arrastrado. A menudo es una mano cerrada. |
| spinning | Usado 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.
Y muchos más artículos interesantes si nos sigues en...
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 =)
ResponderEliminarNo hay de qué Olmo Axayacati ;)
ResponderEliminarAl 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!
ResponderEliminarMuy bien , por aquí seguiremos.
ResponderEliminarLas propiedades grab y grabbing necesitan prefijos para cada navegador, pero, que yo sepa, solo las aceptan Webkit y Firefox:
ResponderEliminar.div1 {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: auto;
}
.div2 {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: auto;
}
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