English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad cursor de CSS especifica el tipo de cursor que se muestra cuando el puntero se coloca sobre un elemento.
La siguiente tabla muestra la descripción de uso y el historial de versiones de este atributo, así como la sintaxis de su uso en scripts de JavaScript.
| Valor por defecto: | Común |
|---|---|
| Aplicable a: | Todos los elementos |
| Herencia: | Sí |
| Animable: | No.Ver: Atributos de animación。 |
| Versión: | CSS 2、3 |
| Sintaxis de JavaScript: | object.style.cursor="context-menu" |
Sintaxis del uso de cursor
La sintaxis de esta propiedad es la siguiente: context-cursor: [url(dirección del archivo de cursor)], 0 o más veces | auto | default | none |-menu | help | pointer | progress | wait | cell | crosshair | text | vertical text |-alias | copy | move | no-drop | not e-allowed | grab | grabbing |-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | row ew-resize | w-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row all-resize |-scroll | zoom-in | zoom
out | initial | inherit
Ejemplo1 h
{
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: copy;
p {
cursor: url("custom.gif"), url("custom.cur"), default;
cursor: help;
a {
cursor: url("custom.gif"), url("custom.cur"), default;}/Prueba para ver‹›
El atributo cursor se utiliza para especificar una lista de valores de cursor definidos por el usuario separados por comas, seguidos de "cursor genérico". Es decir, si el primer cursor especificado no es correcto o no se puede encontrar, se utilizará el siguiente cursor de la lista separado por comas, y así sucesivamente, hasta encontrar un cursor disponible.Si no hay cursor definido por el usuario válido o no es compatible con el navegador, se utilizará el cursor genérico al final de la lista.
Valor de la propiedad
| La tabla a continuación describe los valores de esta propiedad. | Valor | Ver |
|---|---|---|
| Descripción | ||
| Común | auto | |
| El navegador determina el cursor que se debe mostrar según el contexto actual. Por ejemplo, al dejar el cursor sobre el texto. Este es el valor predeterminado. | default | |
| El cursor predeterminado de la plataforma, sin considerar el contexto, generalmente es una flecha. | none | |
| No se presenta cursor. | initial | |
| Establece esta propiedad en su valor predeterminado. | inherit | |
| Si se especifica, el elemento asociado adopta el valor de la propiedad cursor del elemento padre. | ||
| context-menu | Representa que el menú contextual está disponible. | |
| help | Representa útil. | |
| pointer | Cursor que indica un enlace, generalmente la mano extendida del dedo índice. | |
| progress | Indicador de progreso. El programa está ejecutando ciertos procesos, pero el usuario aún puede interactuar con la interfaz (diferente de wait). | |
| wait | Indica que el programa está ocupado y el usuario debe esperar. | |
| Cursor de selección | ||
| cell | Indica que se puede seleccionar una celda (o un grupo de celdas). | |
| crosshair | Una simple cruz de ferrocarril. Se utiliza generalmente para indicar la selección en los mapas bitmaps. | |
| text | Indica que se puede seleccionar texto, generalmente la viga transversal horizontal. | |
| vertical-text | Indica que se puede seleccionar texto vertical, es decir, la viga transversal horizontal. | |
| Cursor de arrastrar y soltar | ||
| alias | Indica que se debe crear un alias o acceso directo. | |
| copy | Indica que se puede copiar algún contenido. | |
| move | Indica que se puede mover el objeto suspendido. | |
| no-drop | Indica que el elemento arrastrado no se puede放置 en la ubicación actual. | |
| not-allowed | Indica que no se puede completar algo. | |
| Cursor de ajuste de tamaño y desplazamiento | ||
| all-scroll | Indica que se puede desplazar en cualquier dirección (desplazamiento). | |
| col-resize | Indica que se puede ajustar el tamaño de las columnas horizontalmente. | |
| row-resize | Indica que se puede ajustar el tamaño de las filas verticalmente. | |
| n-resize | Indica que ciertas orillas deben moverse hacia arriba (hacia el norte). | |
| e-resize | Indica que ciertas orillas se moverán hacia la derecha (hacia el este). | |
| s-resize | Indica que ciertas orillas deben moverse hacia abajo (hacia el sur). | |
| w-resize | Indica que ciertas orillas se moverán hacia la izquierda (hacia el oeste). | |
| ne-resize | Indica que ciertas orillas se moverán hacia arriba y hacia la derecha (norte)./hacia el este). | |
| nw-resize | Indica que ciertas orillas deben moverse hacia arriba y abajo ( norte)./occidental). | |
| se-resize | Indica que ciertas orillas deben moverse hacia la izquierda y derecha (hacia el sur)./hacia el este). | |
| sw-resize | Indica que ciertas orillas deben moverse hacia arriba y abajo (sur)./occidental). | |
| ew-resize | Indica que se puede ajustar el tamaño bidireccional. | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| Cursor de escala | ||
| zoom-in | Indica que se puede ampliar algo. | |
| zoom-out | Indica que se puede reducir algo. | |
| grasping | Indica que se puede tomar algo (arrastrar para mover). | |
| grasping | Indica que algo ha sido tomado. | |
La compatibilidad del cursor del navegador de CSS, los números en la tabla a continuación representan la versión mínima del navegador que admite el atributo; todos los navegadores principales admiten este atributo.
|
Ver tutorial:CSS cursor。