如何使用 CSS 设置不同类型的光标?
CSS(层叠样式表)是设计网站视觉外观(包括光标样式)的强大工具。光标是网页设计的一个重要方面。它有助于向用户提供视觉反馈，并使他们能够有效地进行交互。
什么是光标?
光标是一种位置指示器，用于指示用户在屏幕上的当前位置。它也被称为"插入符号"。它在用户界面设计中扮演着重要的角色。在 CSS 中，我们可以根据需要设置光标，以向用户提供视觉反馈，指示可以在特定位置执行的操作。
语法
css selector {
courser : courser type;
}
现在，我们将探索可以使用 CSS 设置的不同类型的光标
默认光标
在网页设计中，默认光标是最常见的光标类型，在未指定其他光标时使用。它在屏幕上看起来像一个箭头指针，表示用户可以点击该元素。
示例 1
以下是设置默认光标的示例。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
a {
cursor: default;
}
</style>
</head>
<body>
<h2>This is an example of default cursor</h2>
<a href="https://www.cainiaomax.com/index.htm" class="my-link">Click Here</a>
</body>
</html>
指针光标
指针光标以指向链接的手形表示。当用户将鼠标悬停在链接上时，表示该元素可点击。我们可以使用以下代码设置指针光标 -
css-elector {
cursor: pointer;
}
文本光标
文本光标是一条闪烁的水平或垂直线，显示为 I 型光标。当用户将鼠标悬停在文本或文本输入字段上时，表示他们已编辑或选择了文本。我们可以使用以下代码设置文本光标 -
css-elector {
cursor: text;
}
十字线光标
十字线光标只是显示一条水平线和一条垂直线，看起来像十字线指针。十字线光标用于选择屏幕上的特定区域，就像在图像编辑工具中一样。我们可以使用以下代码来设置十字线光标 -
css-elector {
cursor: crosshair;
}
移动光标
移动光标在屏幕上显示为一个四向箭头指针。它通常用于拖放元素，表示该元素可以移动。我们可以使用以下代码设置移动光标 -
css-elector {
cursor: move;
}
不允许的光标
不允许的光标表示请求的操作将不会被执行。它显示为一个带有对角线的圆圈。我们可以使用以下代码设置不允许的光标 -
css-elector {
cursor: not-allowed;
}
进度光标
进度光标显示为一个旋转的圆圈。这意味着程序在后台繁忙，但用户仍然可以与界面交互。我们可以使用以下代码设置进度光标 -
css-elector {
cursor: progress;
}
等待光标
等待光标显示为旋转的风车。这意味着程序正忙，无法与用户界面交互。我们可以使用以下代码设置等待光标 -
css-elector {
cursor: wait;
}
帮助光标
帮助光标显示为问号指针。当用户需要帮助时(例如点击帮助图标或按钮)，可以使用此光标。我们可以使用以下代码设置帮助光标 -
css-elector {
cursor: help;
}
示例 2
以下示例展示了如何使用 CSS 设置不同类型的光标。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color: lightgreen;
}
div{
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Setting the different types of cursors using CSS</h2>
<h3>Move the mouse over the words to see the cursor change:</h3>
<div style="cursor:default">Default</div>
<div style="cursor:text">Text</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:move">Move</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:progress">Progressd</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
</body>
</html>
使用 CSS 自定义光标
除了 CSS 提供的标准光标外，我们还可以使用自定义光标。使用自定义光标，我们可以为网站增添独特的风格。
示例 3
这是一个使用 CSS 创建自定义光标的示例。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.my-cursor {
width: 200px;
margin: auto;
background-color: lightblue;
cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
}
</style>
</head>
<body>
<h2>Custom Cursors with CSS</h2>
<div class="my-cursor">
<h3>Move the mouse over to see the cursor change</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
</body>
</html>
在上面的例子中，我们创建了一个带有 my-cursor 类的 div 元素。然后，我们将光标属性设置为URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png)，自动。这意味着浏览器将使用 cursor_120340.png 文件作为自定义光标，如果找不到或加载该文件，则回退到默认光标。
结论
以上我们讨论了不同类型的 CSS 光标。CSS 光标是网页设计师的强大工具，允许自定义光标样式，并为用户交互提供视觉反馈。使用上述代码，我们可以在 CSS 中设置不同类型的光标。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
