EN
Este contenido no se encuentra disponible en su idioma, pero aquí tiene la versión en inglés.

cursor property

Specifies the type of cursor to display as the mouse pointer moves over the object.

CSS 2.1, Section 18.1

 

Syntax

cursor: all-scroll | auto | col-resize | crosshair | default | hand | help | move | no-drop | not-allowed | pointer | progress | row-resize | text | url(uri) | vertical-text | wait | *-resize

Property values

One or more of the following possible values, separated by commas.

all-scroll

Internet Explorer 6 and later. Arrows pointing up, down, left, and right with a dot in the middle, indicating that the page can be scrolled in any direction.

auto

Default. Browser determines which cursor to display based on the current context.

col-resize

Internet Explorer 6 and later. Arrows pointing left and right with a vertical bar separating them, indicating that the item/column can be resized horizontally.

crosshair

Simple cross hair.

default

Platform-dependent default cursor; usually an arrow.

hand

Hand with the first finger pointing up, as when the user moves the pointer over a link.

help

Arrow with question mark, indicating help is available.

move

Crossed arrows, indicating something is to be moved.

no-drop

Internet Explorer 6 and later. Hand with a small circle with a line through it, indicating that the dragged item cannot be dropped at the current cursor location.

not-allowed

Internet Explorer 6 and later. Circle with a line through it, indicating that the requested action will not be carried out.

pointer

Internet Explorer 6 and later. Hand with the first finger pointing up, as when the user moves the pointer over a link. Identical to hand.

progress

Internet Explorer 6 and later. Arrow with an hourglass next to it, indicating that a process is running in the background. User interaction with the page is unaffected.

row-resize

Internet Explorer 6 and later. Arrows pointing up and down with a horizontal bar separating them, indicating that the item/row can be resized vertically.

text

Editable text; usually an I-bar.

url(uri)

Internet Explorer 6 and later. Cursor is defined by the author, using a custom URI, such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.

vertical-text

Internet Explorer 6 and later. Editable vertical text, indicated by a horizontal I-bar.

wait

Hourglass or watch, indicating that the program is busy and the user should wait.

*-resize

Arrows, indicating an edge is to be moved; the asterisk (*) can be N, NE, NW, S, SE, SW, E, or W—each representing a compass direction.

CSS information

Applies ToAll elements
Mediavisual
Inheritedtrue
Initial Valueauto

Standards information

Remarks

Windows Internet Explorer 9 and later: When specifying a custom cursor via url(), you must provide at least one "fallback" cursor in addition to the custom cursor, or the custom cursor will not render correctly. For instance, "cursor: url(cursors/cursor2.ani), pointer". See this topic's samples for examples of fallback cursors.

The property handles a comma-separated list of cursor values. If the first cursor is specified incorrectly or can't be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found. If none of the listed cursors is valid, the cursor does not change.

Cursors support many shape, color, and movement combinations. This permits you to substitute the default cursors with your preferred design. For instance, you may want your company logo to display as the "progress" cursor; or your country's flag waving in the wind to display as the "wait" cursor.

Cursors have been the subject of security bulletins and updates. If your custom cursors are not behaving as expected, examine the security settings for your browser along with your cursors. This is a common issue with animated cursors. For an example, refer to TechNet Security Resources and search for "Microsoft Security Bulletin MS05-002".

Below are the different possible values for the cursor property:

Different possible values for the cursor propertyDifferent possible values for the cursor propertyDifferent possible values for the cursor property

Examples

The following examples use the cursor CSS property and the cursor scripting property to change the cursor as it passes over an object.

This example uses a call to an embedded (global) style sheet to set the cursor to hand as the cursor passes over all paragraphs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_h.htm


<style type="text/css">
  p { cursor: hand; }
</style>

This example uses inline scripting to set the cursor to hand as the cursor passes over the paragraph.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_s.htm


<p onmouseover="this.style.cursor='hand'">

This example demonstrates setting a custom cursor, by using the url(uri) value. Notice the addition of a fallback pointer. Without this fallback pointer, this custom cursor does not render.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_c.htm


<style type="text/css">
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + "), pointer";
</style>

Here is a sample of all currently supported cursors.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/cursor_a.htm

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Mostrar:
© 2014 Microsoft