如何使用CSS设置不同类型的光标？
- WBOY转载
- 2023-09-22 19:45:031601浏览
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.tutorialspoint.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
Here is an example of how to set the different types of cursors using 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>
In the above example, we have created a div element with a class of my-cursor. We then set the cursor property to URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。这意味着浏览器将cursor_120340.png文件用作自定义光标，如果找不到或加载文件失败，则回退到默认光标。
结论
在这里，我们讨论了不同类型的CSS光标。它是网页设计师的强大工具，可以自定义光标样式并为用户交互提供视觉反馈。通过使用上面的代码，我们可以在CSS中设置不同类型的光标。
以上是如何使用CSS设置不同类型的光标？的详细内容。更多信息请关注PHP中文网其他相关文章！