cursor
Resumen
La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.
- CSS:Valor_inicial:
CSS:auto
- Se aplica a: todos los elementos
- CSS:inheritance: Si
- Porcentaje: N/A
- Media: CSS:Media:Visual, CSS:Media:Interactivo
- CSS:Valor_calculado:como sea especificado con URLs relativos convertidos a URLs absolutos.
Sintaxis
cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | CSS:inherit ;
cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ;
Values
- <url> [ ]?
-
URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea Uso_de_URL_como_valor_de_la_propiedad_cursor para mas detalles.
- <std-cursor-name>
-
Algunos nombres de cursores se encuentra en la siguiente tabla.
Supported CSS standard values
Categoría | nombre de CSS | Descripción |
---|---|---|
General | auto |
El browser (user agent) determina el cursor que mostrara basado en el
contenido presente. E.g. equivalent to text when
hovering text
|
default |
default cursor (typically an arrow) | |
none |
no cursor is rendered | |
Links & status | context-menu |
cursor indicating that a context menu is available under the cursor |
help |
cursor indicating help is available | |
pointer |
cursor used when over links (typically a hand) | |
progress |
cursor indicating that the program is busy in the background but the
user can still interact with the interface (unlike for
wait )
|
|
wait |
cursor indicating the program is busy (sometimes an hourglass or a watch) | |
Selection | cell |
cursor indicating that cells can be selected |
crosshair |
cross cursor, often used to indicate selection in a bitmap | |
text |
cursor indicating text can be selected (typically an I-beam) | |
vertical-text |
cursor indicating that vertical text can be selected (typically a sideways I-beam) | |
Drag and drop | alias |
cursor indicating an alias or shortcut is to be created |
copy |
cursor indicating that something can be copied | |
move |
the hovered object may be moved | |
no-drop |
cursor showing that a drop is not allowed at the current location | |
not-allowed |
cursor showing that something cannot be done | |
Resize & scrolling | all-scroll |
cursor showing that something can be scrolled in any direction (panned) |
col-resize |
cursor for resizing columns horizontally | |
e-resize |
cursor for resizing the right edge of a box | |
ew-resize |
cursor for resizing left or right | |
n-resize |
cursor for resizing the top edge of a box | |
ne-resize |
cursor for resizing the top right corner of a box | |
nesw-resize |
cursor for resizing in the top-right or bottom-left directions | |
ns-resize |
cursor for resizing up or down | |
nw-resize |
cursor for resizing the top left corner of a box | |
nwse-resize |
cursor for resizing in the top-left or bottom-right directions | |
row-resize |
cursor for resizing rows vertically | |
s-resize |
cursor for resizing the bottom edge of a box | |
se-resize |
cursor for resizing the bottom right corner of a box | |
sw-resize |
cursor for resizing the bottom left corner of a box | |
w-resize |
cursor for resizing the left edge of a box |
Extended Gecko CSS values
CSS name | Description | Deprecation |
---|---|---|
-moz-alias |
replaced by standard value alias as described in the previous table |
Gecko 1.8a6 |
-moz-cell |
replaced by standard value cell as described in the previous table |
Gecko 1.8a6 |
-moz-context-menu |
replaced by standard value context-menu as described in the previous table |
Gecko 1.8a6 |
-moz-copy |
replaced by standard value copy as described in the previous table |
Gecko 1.8a6 |
-moz-grab |
a cursor value that should indicate that an element or an object in a webpage can be grabbed | |
-moz-grabbing |
a cursor value that should indicate that an element or an object is currently being grabbed | |
-moz-spinning |
replaced by standard value progress as described in the previous table |
Gecko 1.7.1 |
-moz-zoom-in |
used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified | |
-moz-zoom-out |
used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out |
Examples
Inline: <span style="cursor: crosshair">Some Text</span> External: .pointer { cursor: pointer; } .move { cursor: move; }
Especificaciones
Specification |
---|
CSS Basic User Interface Module Level 4 # cursor |
Compatibilidad con navegadores
BCD tables only load in the browser