Home >Web Front-end >CSS Tutorial >How to change mouse shape with css
How to change mouse shape with css
- 王林Original
- 2021-05-20 14:54:122952browse
The way to change the shape of the mouse in css is to add the cursor attribute to the specified element and set the attribute value to the required value, such as pointer, move, text, etc. The specific code is such as [44d0a41dc33d35d29e8b22c19287700ePointer54bdf357c58b8a65c66d7c19c8e4d114].
The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.
css provides us with a very useful attribute, which is the cursor attribute. Let us take a look at this attribute.
The cursor attribute specifies the type (shape) of the cursor to be displayed.
Some commonly used attribute values:
default Default cursor (usually an arrow)
auto Default. The cursor set by the browser.
#crosshair The cursor appears as a crosshair.
pointer The cursor appears as a pointer (a hand) indicating the 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).
Code example:
<html> <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>
You can copy the above and run it locally to see the specific running effect.
Related video sharing: css video tutorial
The above is the detailed content of How to change mouse shape with css. For more information, please follow other related articles on the PHP Chinese website!