数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 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://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
这是一个使用 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 元素。然后我们将 cursor 属性设置为 URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto。这意味着浏览器使用 cursor_120340.png 文件作为自定义鼠标指针，如果找不到或无法加载该文件，则回退到默认鼠标指针。
结论
在这里，我们讨论了不同类型的 CSS 鼠标指针。它是一个强大的工具，允许网页设计师自定义鼠标指针样式并为用户交互提供视觉反馈。使用上面的代码，我们可以在 CSS 中设置不同类型的鼠标指针。
浏览量：134
