css cursor

作者：为你丶偶尔温柔一次发布日期:2026-04-13 浏览:87

/* 设置鼠标悬停在元素上时的光标样式 */

/* 默认箭头 */
.default-cursor {
  cursor: default;
}

/* 手型（通常用于可点击的链接或按钮） */
.pointer-cursor {
  cursor: pointer;
}

/* 文本选择光标（通常用于文本输入框） */
.text-cursor {
  cursor: text;
}

/* 等待光标（通常用于加载中） */
.waiting-cursor {
  cursor: wait;
}

/* 不允许光标（通常用于不可用的元素） */
.not-allowed-cursor {
  cursor: not-allowed;
}

/* 自定义光标（使用图片作为光标） */
.custom-cursor {
  cursor: url('path/to/custom-cursor.png'), auto;
}

解释说明：

cursor 属性用于定义当鼠标指针位于某个元素之上时所显示的光标样式。
上面的代码展示了几种常见的光标样式，包括默认箭头、手型、文本选择光标、等待光标和不允许光标。
最后一个示例展示了如何使用自定义图片作为光标。如果图片无法加载，浏览器会回退到 auto 光标。

上一篇：css 动画

下一篇：css渐变背景色