CSS的cursor属性允许您指定应该显示给用户的游标类型。默认情况下,当光标悬停在链接上时,光标从指针变为手。
下表显示了cursor属性的可能值-
Sr.No. | Value & Remark |
---|---|
1 | auto 光标的形状取决于其上方的上下文区域。 |
2 | crosshair 十字准线或加号 |
3 | default 一个箭头 |
4 | pointer 手(在IE 4中,该值为手) |
5 | move 十字箭头 |
6 | e-resize 链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-cursors.html 来源:LearnFk无涯教程网 光标指示框的边缘将向右(向东)移动 |
7 | ne-resize 光标指示框的边缘将向上和向右移动(北/东) |
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>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)