Ejemplo
Algunos cursores diferentes:
span.crosshair
{
cursor: crosshair;
}
span.help
{
cursor: help;
}
span.wait
{
cursor: wait;
}
Inténtalo tú mismo " Definición y Uso
La propiedad cursor especifica el tipo de cursor que se mostrará cuando se apunta en un elemento.
| Valor por defecto: | auto |
|---|---|
| Heredado: | yes |
| animatable: | no. Read about animatable |
| Versión: | CSS2 |
| la sintaxis de JavaScript: | object .style.cursor="crosshair" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
sintaxis CSS
cursor:value;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| alias | El cursor indica un alias de algo se va a crear | Juegalo " |
| all-scroll | El cursor indica que algo se puede desplazar en cualquier dirección | Juegalo " |
| auto | Defecto. El navegador establece un cursor | Juegalo " |
| cell | El cursor indica que una célula (or set of cells) se puede seleccionar | Juegalo " |
| context-menu | El cursor indica que un contexto-menú está disponible | Juegalo " |
| col-resize | El cursor indica que la columna puede cambiar el tamaño horizontal | Juegalo " |
| copy | El cursor indica que algo se va a copiar | Juegalo " |
| crosshair | El cursor rinda como punto de mira | Juegalo " |
| default | El cursor por defecto | Juegalo " |
| e-resize | El cursor indica que un borde de una caja se va a mover a la derecha (east) | Juegalo " |
| ew-resize | Indica un cursor de cambio de tamaño bidireccional | Juegalo " |
| grab | El cursor indica que algo puede ser tomado | Juegalo " |
| grabbing | El cursor indica que algo puede ser tomado | Juegalo " |
| help | El cursor indica que hay ayuda disponible | Juegalo " |
| move | El cursor indica que algo se va a mover | Juegalo " |
| n-resize | El cursor indica que un borde de una caja se va a mover hacia arriba (north) | Juegalo " |
| ne-resize | El cursor indica que un borde de una caja se va a mover hacia arriba y la derecha (north/east) | Juegalo " |
| nesw-resize | Indica un cursor de cambio de tamaño bidireccional | Juegalo " |
| ns-resize | Indica un cursor de cambio de tamaño bidireccional | Juegalo " |
| nw-resize | El cursor indica que un borde de una caja se va a mover hacia arriba y hacia la izquierda (north/west) | Juegalo " |
| nwse-resize | Indica un cursor de cambio de tamaño bidireccional | Juegalo " |
| no-drop | El cursor indica que el elemento arrastrado no se puede quitar aquí | Juegalo " |
| none | Sin cursor se representa para el elemento | Juegalo " |
| not-allowed | El cursor indica que la acción solicitada no se ejecutará | Juegalo " |
| pointer | El cursor es un puntero e indica un enlace | Juegalo " |
| progress | El cursor indica que el programa está ocupado (in progress) | Juegalo " |
| row-resize | El cursor indica que la fila puede ser redimensionado verticalmente | Juegalo " |
| s-resize | El cursor indica que un borde de una caja se va a mover hacia abajo (south) | Juegalo " |
| se-resize | El cursor indica que un borde de una caja se va a mover hacia abajo ya la derecha (south/east) | Juegalo " |
| sw-resize | El cursor indica que un borde de una caja se va a mover hacia abajo y hacia la izquierda (south/west) | Juegalo " |
| text | El cursor indica el texto que puede seleccionarse | Juegalo " |
| URL | Una lista separada por comas de las direcciones URL separa a los cursores personalizados. Note: Siempre especificar un cursor genérico al final de la lista, en caso de que ninguno de los cursores de URL definidos se puede utilizar | Juegalo " |
| vertical-text | El cursor indica vertical de texto que puede ser seleccionada | Juegalo " |
| w-resize | El cursor indica que un borde de un área que se va a desplazarse a la izquierda (west) | Juegalo " |
| wait | El cursor indica que el programa está ocupado | Juegalo " |
| zoom-in | El cursor indica que algo se puede ampliar | Juegalo " |
| zoom-out | El cursor indica que algo se puede hacer zoom a cabo | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
Referencia HTML DOM: cursor property