关注我们

CSS - 游标(Cursors)

CSS的cursor属性允许您指定应该显示给用户的游标类型。默认情况下，当光标悬停在链接上时，光标从指针变为手。

下表显示了cursor属性的可能值-

Sr.No.	Value & Remark
1	auto 光标的形状取决于其上方的上下文区域。
2	crosshair 十字准线或加号
3	default 一个箭头
4	pointer 手(在IE 4中，该值为手)
5	move 十字箭头
6	e-resize 光标指示框的边缘将向右(向东)移动
7	ne-resize 光标指示框的边缘将向上和向右移动(北/东) 链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-cursors.html 来源：LearnFk无涯教程网
8	nw-resize 光标指示框的边缘要上下移动(北/西)
9	n-resize 光标指示框的边缘要向上移动(向北)
10	se-resize 光标指示框的边缘将被左右移动(南/东)
11	sw-resize 光标指示框的边缘要上下左右移动(南/西)
12	s-resize 光标指示框的边缘要向下移动(向南)
13	w-resize 光标指示框的边缘将向左(向西)移动
14	text 上下箭头
15	wait 一个沙漏
16	help 问号或气球，非常适合在帮助按钮上使用
17	<url> 光标图像文件的来源

这是一个例子-

复制代码

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style="cursor:auto">Auto</div>
      <div style="cursor:crosshair">Crosshair</div>
      <div style="cursor:default">Default</div>
      
      <div style="cursor:pointer">Pointer</div>
      <div style="cursor:move">Move</div>
      <div style="cursor:e-resize">e-resize</div>
      <div style="cursor:ne-resize">ne-resize</div>
      <div style="cursor:nw-resize">nw-resize</div>
      
      <div style="cursor:n-resize">n-resize</div>
      <div style="cursor:se-resize">se-resize</div>
      <div style="cursor:sw-resize">sw-resize</div>
      <div style="cursor:s-resize">s-resize</div>
      <div style="cursor:w-resize">w-resize</div>
      
      <div style="cursor:text">text</div>
      <div style="cursor:wait">wait</div>
      <div style="cursor:help">help</div>
   </body>
</html>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

小马哥讲Spring AOP编程思想 -〔小马哥〕

云原生架构与GitOps实战 -〔王炜〕

AI 应用实战课 -〔黄佳〕

工程师个人发展指南 -〔李云〕

好记忆不如烂笔头。留下您的足迹吧 :)