cursor

Resumen

La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.

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

Ver El Ejemplo Vivo

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cursor
alias
all-scroll
auto
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
Grab cursors (grab and grabbing)
grabbing
help
move
n-resize
ne-resize
nesw-resize
no-drop
none
not-allowed
ns-resize
nw-resize
nwse-resize
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
url()
url() positioning syntax
vertical-text
w-resize
wait
zoom-in
zoom-out

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.