在css中如何用cursor设置鼠标指针样式-css教程-PHP中文网

在css中如何用cursor设置鼠标指针样式

P粉602998670

发布： 2025-10-20 22:41:01

原创

704人浏览过

通过cursor属性可设置鼠标指针样式，如pointer、text、move等，用于提供交互反馈；支持自定义图片光标并设置备选值，合理使用能提升用户体验，需注意兼容性。

在css中如何用cursor设置鼠标指针样式

在 CSS 中，可以通过 cursor 属性来设置鼠标指针的样式。当用户将鼠标移动到某个元素上时，浏览器会显示指定的光标形状，从而提供视觉反馈。

cursor: 值;

将“值”替换为具体的光标类型，比如 pointer、move 等。

以下是一些常用的 cursor 取值及其效果：

除了使用内置样式，还可以用图片自定义光标：

Cursor Directory

专为Cursor设计的开源资源库、提示词库

110

cursor: url('path/to/cursor.png'), auto;

其中：

.btn {
  cursor: pointer;
}

.editable {
  cursor: text;
}

.draggable {
  cursor: move;
}

.disabled {
  cursor: not-allowed;
}

基本上就这些。合理使用 cursor 能提升用户体验，让交互更直观。注意自定义光标在不同系统和浏览器中兼容性略有差异，建议测试后再上线。

以上就是在css中如何用cursor设置鼠标指针样式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：