Skip to main content

Visit Mozilla.org

CSS:cursor

De MDC

« Referencia CSS

Tabla de contenidos

[editar] Resumen

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

[editar] Sintaxis 

cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | CSS:inherit ;

cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;

[editar] Values

<url> [<x> <y>]? 
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.

[editar] 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 Nuevo en Firefox 3
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

[editar] 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

[editar] Examples

Ver ejemplos en acción 

Inline:

<span style="cursor: crosshair">Some Text</span>

External:

.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}

[editar] Notes

While this property works on older browsers, not all values are fully supported.

[editar] Specifications

[editar] 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

[editar] See also

Obtenido de "http://developer.mozilla.org/es/docs/CSS:cursor"