CSS cursor PropertyS2C Home « CSS cursor Property
Definition
The CSS cursor property allows us to specify the type of cursor to be displayed when pointing at an element.
Applies To
All elements.
Property Values
auto - The user agent determines the cursor to display, dependant upon current context.
crosshair - The cursor is rendered as a crosshair.
default - The cursor default as assigned by the user agent.
help - The cursor is rendered to imply help is available on the element in focus. Often rendered as a question mark.
inherit - The cursor properties are inherited from the parent element.
move - The cursor is rendered to imply the object is moveable. Often rendered as a crosshair with an arrowhead on each point.
n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize - The cursor is rendered to imply the focus is resizeable. Often rendered as a line with an arrowhead on each point.
progress - The cursor is rendered to imply the program is busy but the user can still interact with it. Often rendered as a spinning circle.
text - The cursor is rendered to imply text. Often rendered as an I-beam.
url - The user agent retrieves the cursor from a comma seperated url list. Always have a generic cursor as the last entry in the list in case the other cursors can't be resolved.
wait - The cursor is rendered to imply the program is busy and the user should wait for the process to end. Often rendered as an hourglass.
Default Value
Default value is set to auto.
Inheritance
The cursor property is inherited from the parent element if no value is applied to the current element.
Browser Anomalies
IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.
Example
<!DOCTYPE html>
<!-- Our HTML/CSS for the CSS cursor property follows -->
<html lang="en">
<head>
<title>CSS Reference - CSS cursor Property</title>
<!-- Valid values for CSS cursor Property are:
auto, crosshair, default, help, inherit, move, n-resize,
ne-resize, e-resize, se-resize, s-resize, sw-resize,
w-resize, nw-resize, progress, text, wait.
-->
</head>
<body>
<h1>The CSS cursor Property</h1>
<p>
<span style="cursor:auto;">auto</span><br />
<span style="cursor:crosshair;">crosshair</span><br />
<span style="cursor:default;">default</span><br />
<span style="cursor:help;">help</span><br />
<span style="cursor:move;">move</span><br />
<span style="cursor:n-resize;">n-resize</span><br />
<span style="cursor:ne-resize;">ne-resize</span><br />
<span style="cursor:e-resize;">e-resize</span><br />
<span style="cursor:se-resize;">se-resize</span><br />
<span style="cursor:s-resize;">s-resize</span><br />
<span style="cursor:sw-resize;">sw-resize</span><br />
<span style="cursor:w-resize;">w-resize</span><br />
<span style="cursor:nw-resize;">nw-resize</span><br />
<span style="cursor:progress;">progress</span><br />
<span style="cursor:text;">text</span><br />
<span style="cursor:wait;">wait</span><br />
</p>
</body>
</html>
Copy and paste the above code into a notepad file.
Run the file and mouse over each word to see the effects.
Homepage
Top