在CSS中,可以使用cursor属性来定义鼠标指针的样式。cursor属性有多种可选值,用于指定不同的鼠标样式。以下是cursor属性的语法和20种常见的可选值:

语法:
selector {
  cursor: value;
}

可选值:

1. auto: 默认值,由浏览器决定鼠标样式。

2. default: 浏览器默认的鼠标样式,通常是一个箭头。

3. none: 隐藏鼠标指针。

4. context-menu: 上下文菜单(通常是右键菜单)的小图标。

5. help: 表示帮助可用,通常是一个问号。

6. pointer: 表示链接,通常是一个手指。

7. progress: 表示程序运行中,通常是一个旋转的圆形。

8. wait: 表示等待,通常是一个沙漏。

9. cell: 表示可调整的单元格边缘。

10. crosshair: 十字线。

11. text: 文本光标,通常是一条竖线。

12. vertical-text: 垂直文本光标,通常是一条横线。

13. alias: 表示链接别名,通常是一个箭头。

14. copy: 表示复制,通常是两个文档重叠。

15. move: 表示移动,通常是一个十字箭头。

16. no-drop: 表示不允许拖放。

17. not-allowed: 表示操作不被允许。

18. e-resize、n-resize、ne-resize等: 表示可在相应方向上调整大小的光标。

19. grab: 表示可拖动。

20. grabbing: 表示正在拖动。

示例代码:
.button {
  cursor: pointer;
}

.text-input {
  cursor: text;
}

.resizeable {
  cursor: nwse-resize; /* 右下角调整大小 */
}

以上示例代码中,.button类的元素将显示一个手指光标,.text-input类的元素将显示一个文本光标,.resizeable类的元素将显示一个右下角调整大小的光标。你可以根据具体的需求选择合适的鼠标样式。


转载请注明出处:http://www.zyzy.cn/article/detail/4040/CSS