网页设计cursor

在网页设计中，`cursor` 属性用于控制鼠标指针在元素上的显示样式，通过 CSS 可以定义不同的光标效果，以提升用户体验和交互反馈。以下是一些常见的 `cursor` 属性和应用场景：

常用 `cursor` 属性值

1. 默认光标

css

cursor: default; / 默认箭头（系统默认） /

2. 指针（可点击元素）

css

cursor: pointer; / 手型图标（常用于按钮、链接） /

3. 文本选择

css

cursor: text; / I 型光标（提示可输入或选择文本） /

4. 加载等待

css

cursor: wait; / 沙漏/旋转圆圈（表示操作进行中） /

5. 不可用状态

css

cursor: not-allowed; / 禁止图标（如禁用按钮） /

6. 拖拽或移动

css

cursor: move; / 十字箭头（提示元素可拖拽） /

7. 缩放或调整大小

css

cursor: zoom-in; / 放大镜（图片缩放） /

cursor: zoom-out;

cursor: ew-resize; / 水平调整大小（如分隔栏） /

cursor: ns-resize; / 垂直调整大小 /

8. 帮助提示

css

cursor: help; / 问号（提示有额外信息） /

自定义光标

可以通过 `url` 指定自定义图片作为光标，并设置备用选项：

css

cursor: url('custom-cursor.png'), auto;

css

cursor: url('') 32 32, url('cursor.png') 16 16, pointer;

使用建议

1. 明确交互意图

2. 兼容性测试

3. 移动端适配

示例代码

html

悬停我（手型光标）

通过合理使用 `cursor` 属性，可以显著提升用户对界面功能的感知，增强交互体验。