Home >Web Front-end >CSS Tutorial >How to use css cursor attribute
How to use css cursor attribute
- 青灯夜游Original
- 2019-05-28 12:03:002949browse
css cursor attribute is used to specify the type (shape) of the cursor to be displayed, and defines the cursor shape used when the mouse pointer is placed within the bounds of an element. All major browsers support the cursor attribute.
How to use the css cursor attribute?
The cursor attribute specifies the type (shape) of the cursor to be displayed.
Possible attribute values:
● url: The URL of the custom cursor to be used. Note: Always define a normal cursor at the end of this list, in case there is no cursor available defined by URL.
● default: The default cursor (usually an arrow)
● auto: Default. The cursor set by the browser.
● Crosshair: The cursor is rendered as crosshairs.
● Pointer: The cursor appears as a pointer (a hand) indicating a link
● move: This cursor indicates that an object can be moved.
● e-resize: This cursor indicates that the edge of the rectangular box can be moved to the right (east).
● ne-resize: This cursor indicates that the edge of the rectangular box can be moved up and to the right (North/East).
● nw-resize: This cursor indicates that the edge of the rectangular box can be moved up and to the left (north/west).
● n-resize: This cursor indicates that the edge of the rectangular box can be moved upward (north).
● se-resize: This cursor indicates that the edge of the rectangular box can be moved down and to the right (south/east).
● sw-resize: This cursor indicates that the edge of the rectangular box can be moved down and to the left (south/west).
● s-resize: This cursor indicates that the edge of the rectangular box can be moved downward (North/West).
● w-resize: This cursor indicates that the edge of the rectangular box can be moved to the left (west).
● 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).
Description: This attribute defines the cursor shape used when the mouse pointer is placed within the boundary range of an element (however, CSS2.1 does not define which boundary determines this range).
Note: All major browsers support the cursor attribute. Opera 9.3 and Safari 3 do not support url values. The attribute value "inherit" is not supported in any version of Internet Explorer, including IE8.
css cursor attribute example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</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> </body> </html>
The above is the detailed content of How to use css cursor attribute. For more information, please follow other related articles on the PHP Chinese website!