How to change mouse shape with css-CSS Tutorial-php.cn

How to change mouse shape with css

王林

Release： 2023-01-06 11:14:38

Original

2913 people have browsed it

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 [Pointer].

How to change mouse shape with css

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>

Copy after login

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!