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

How to set mouse cursor shape with css

王林

Release： 2023-01-03 09:25:17

Original

3887 people have browsed it

How to set the mouse cursor shape in css: You can use the cursor attribute to set it, such as [crosshair], which means setting the cursor to a crosshair shape.

How to set mouse cursor shape with css

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>

Copy after login

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!