cursor: ***;
| Browser |
|
|---|
The cursor property changes mouse cursor shapes.
#example { cursor: wait; }
The values for the cursor property
(Move the mouse over the "Example" text)
| Property | Value | Shape | Example |
|---|---|---|---|
| cursor | auto |  |
Example |
| default |  |
Example | |
| pointer |  |
Example | |
| crosshair |  |
Example | |
| move |  |
Example | |
| text |  |
Example | |
| wait |  |
Example | |
| help |  |
Example | |
| n-resize |  |
Example | |
| e-resize |  |
Example | |
| s-resize | |
Example | |
| w-resize | |
Example | |
| ne-resize |  |
Example | |
| se-resize |  |
Example | |
| sw-resize | |
Example | |
| nw-resize | |
Example | |
| Custom cursor | |||
| url(***.cur) |  |
Example | |
| Extension | |||
| col-resize |  |
Example | |
| row-resize |  |
Example | |
| all-scroll |  |
Example | |
| not-allowed |  |
Example | |
| no-drop |  |
Example | |
| progress |  |
Example | |
| vertical-text |  |
Example | |
The default is "auto".
About custom cursor
The custom cursor file can be specified by using the "url()" option.
[Move the mouse over this text]
Example of specifying "example.cur".
cursor: url(example.cur);
A comma-separated list of cursor values
In the following example, when the custom cursor cannot be used in the user's computer, "text" is applied.
cursor: url(example.cur), text;
In the following example, when "example.cur" cannot be used in the user's computer, "example.gif" is used.
cursor: url(example.cur), url(example.gif), text;
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
#example1 { cursor: wait; }
#example2 { cursor: help; }
#example3 { cursor: url(image/example.cur), default; }
</style>
</head>
<body>
<p><span id="example1">Please wait for a while</span></p>
<p><a href="index.html" id="example2">Help</a></p>
<p><img src="image/face.gif" alt="Face" width="75" height="78" id="example3"></p>
</body>
</html>
- Output
-
Please wait for a while
