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; }
Notes
While this property works on older browsers, not all values are fully supported.
Specifications
Browser compatibility
Browser | Lowest Version (<std-cursor-name> ) |
Lowest Version (<url> ) |
---|---|---|
Internet Explorer | 4 | 6 (only .cur files) |
Firefox | 1.0 | 1.5 |
Netscape | 6 | 8 |
Opera | 7 | - |
Konqueror | 3.1 | 3.1 |
Safari | 1.2 | 1.2 |
Safari (Win) | 3.0 | 3.0 |