Introduction and Usage of CSS Cursor Property

1. CSS Cursor Property Overview

The cursor property specifies the type (shape) of the cursor to be displayed. This property defines the cursor shape used when the mouse pointer is placed within the bounds of an element. Possible values ​​include Auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, and help.

2. CSS Cursor Property Usage

<!-- The cursor attribute defines the cursor shape used when the mouse pointer is placed within the bounds of an element; -->
div {
    cursor: [some value]
}

Test Code:

<p>Please move the mouse over the word, you can see the mouse pointer changes:</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:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>

3. Basic Properties of Cursor

Value	Description
url	The URL of the custom cursor to use. Note: Always define a generic cursor at the end of this list if the URL defines no available cursor.
default	Default cursor (usually an arrow)
auto	Default. The browser sets the cursor.
crosshair	The cursor appears as a crosshair.
pointer	The cursor is rendered as a pointer (a hand) to indicate a link.
move	This cursor indicates that an object can be moved.
text	This cursor indicates text.
wait	This cursor indicates that the program is busy (usually a watch or hourglass).
help	This cursor indicates available help (usually a question mark or a balloon).
e-resize	This cursor indicates that the edge of the rectangle can be moved to the right (east).
ne-resize	This cursor indicates that the edge of the rectangle can be moved up and to the right (north/east).
nw-resize	This cursor indicates that the edge of the rectangle can be moved up and to the left (north/west).
n-resize	This cursor indicates that the edge of the rectangle can be moved up (north).
se-resize	This cursor indicates that the edge of the rectangle can be moved down and to the right (south/east).
sw-resize	This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
s-resize	This cursor indicates that the edge of the rectangle can be moved down (south).
w-resize	This cursor indicates that the edge of the rectangle can be moved to the left (west).

4. Usage of Cursor URL

When the url introduces the cursor, it must be a [.cur] or [.ani] file, and the default value must be set (in case the available cursor defined by the URL can be used as a backup!), otherwise, there will be problems that cannot be displayed.

div{
  cursor:url("path"),default;
}

IE supports cur, ani, ico these three formats. FF supports bmp, gif, jpg, cur, ico formats, not ani format, nor gif animation format. Therefore, it is generally better to save the picture referenced by the url in the ico or cur format!

The recommended size of the mouse image is 32*32, otherwise, the icon size may be inconsistent! Note: In addition, for the problem that the mouse image is not displayed in the browser, the problem mostly lies in the reference to the URL path of the mouse image. You can try the absolute and relative path references respectively.