Home > Article > Web Front-end > How to set mouse cursor shape with css
How to set mouse cursor shape with css
- 王林Original
- 2021-02-24 17:30:573878browse
How to set the mouse cursor shape in css: You can use the cursor attribute to set it, such as [c0b42772e2cac3ab9b0a7705506f77b3crosshair54bdf357c58b8a65c66d7c19c8e4d114], which means setting the cursor to a crosshair shape.
The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.
Attribute introduction:
The cursor attribute defines the cursor shape used when the mouse pointer is placed within the boundary of an element.
Common attribute values:
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).
#auto Default. The cursor set by the browser.
#crosshair The cursor appears as a crosshair.
pointer The cursor is rendered as a pointer (a hand) indicating the link
Method to set the mouse cursor shape:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> </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:e-resize">e-resize</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:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>
Related learning: CSS tutorial
The above is the detailed content of How to set mouse cursor shape with css. For more information, please follow other related articles on the PHP Chinese website!