crosshair], which means setting the cursor into a crosshair shape."/> crosshair], which means setting the cursor into a crosshair shape.">

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:573843browse

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.

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn