探索CSS中的cursor鼠标属性
CSS的cursor
属性用于设置鼠标指针的样式,当鼠标悬停在元素上时。这个属性可以设置为多种预定义的值,也可以设置为自定义图像。
以下是一些常用的cursor
属性值:
default
:默认光标(通常是一个箭头)none
:不显示光标context-menu
:右键菜单光标pointer
:指针(通常用于链接)wait
:等待光标(通常是一个沙漏或圆形加载符号)help
:帮助光标(通常是一个问号)crosshair
:十字箭头光标zoom-in
:放大光标zoom-out
:缩小光标move
:移动光标(通常是一个箭头,表示元素可被移动)
自定义光标可以使用url
函数指定一个图像文件作为光标。
示例代码:
/* 设置元素为指针光标 */
.link {
cursor: pointer;
}
/* 设置元素为自定义图像光标 */
.custom-cursor {
cursor: url('custom-cursor.png'), auto;
}
HTML 使用:
<div class="link">链接样式光标</div>
<div class="custom-cursor">自定义光标样式</div>
评论已关闭