📅 最后修改于: 2023-12-03 15:30:10.749000 🧑 作者: Mango
CSS 光标指针属性（cursor）用来控制鼠标指针的样式。在网页设计中，使用不同的鼠标指针来增强交互性，让网页更具吸引力。
使用 CSS 光标指针属性很简单，只需在目标元素中设置 cursor 属性的值即可。
target_element {
cursor: value;
}
其中，value 是一个代表光标指针样式的字符串。
CSS 光标指针属性支持多种光标指针样式，如下所示：
auto 默认值，浏览器根据上下文自动选择指针类型default 默认指针none 隐藏鼠标指针pointer 手形指针，表示链接可点击context-menu 表示元素可提供上下文菜单（鼠标右键）help 帮助指针，通常用于说明符号wait 等待指针，表示后续操作需要等待progress 进度指针，表示后续操作正在发生cell 单元格指针，表示表格中的单元格可选择crosshair 十字形指针，通常用于绘图和游戏text 文本指针，表示可输入文本的元素vertical-text 纵向文本指针，表示可输入竖排文本的元素alias 箭头指针，表示链接指向另一个页面copy 复制指针，表示元素可被复制move 移动指针，表示元素可被移动no-drop 禁止拖放指针，表示元素不可被拖动not-allowed 禁止指针，表示元素不可用以下是一个简单的示例代码，展示了如何使用 CSS 光标指针属性：
<!DOCTYPE html>
<html>
<head>
<title>CSS Cursor Property</title>
<style>
.link {
display: inline-block;
padding: 8px 16px;
background-color: #1e88e5;
color: #fff;
cursor: pointer;
}
.input {
padding: 8px 16px;
border: 1px solid #1e88e5;
border-radius: 4px;
cursor: text;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url('icon.png');
cursor: pointer;
}
</style>
</head>
<body>
<a href="#" class="link">Click me</a>
<br><br>
<input type="text" class="input" placeholder="Enter your name">
<br><br>
<div class="icon"></div>
</body>
</html>
CSS 光标指针属性可以为网页增添交互性，提升用户体验。开发者可以根据需要选择适合的光标指针样式，并在目标元素中设置 cursor 属性。