在CSS中,cursor
属性用于设置鼠标指针在悬停在元素上时的样式。以下是一些常用的cursor
属性值及其描述:
-
default
:显示系统默认的光标样式,通常是一个箭头。 -
pointer
:表示可点击的链接或按钮,通常显示为手型。 -
move
:指示可以移动的元素。 -
text
:指示文本可被选中。 -
not-allowed
:指示不允许操作的区域。 -
crosshair
:显示十字准心,通常用于表格中可编辑的单元格。 -
help
:显示帮助信息,通常以箭头加问号的形式。 -
wait
:表示程序正在忙碌,如加载中。 -
progress
:表示程序正在处理任务,但用户仍可执行其他操作。 -
cell
:表示可选择一个单元格或一组单元格。 -
vertical-text
:表示可选择垂直文本。 -
alias
:表示创建别名或快捷方式。 -
copy
:表示可以复制内容。 -
no-drop
:表示不可放置元素。 -
all-scroll
:表示元素的所有方向都可以滚动。 -
col-resize
、row-resize
、n-resize
、s-resize
、e-resize
、w-resize
、ns-resize
、ew-resize
、ne-resize
、nw-resize
、se-resize
、sw-resize
、nesw-resize
、nwse-resize
:分别表示不同方向的调整大小。
您可以通过在HTML元素上添加style="cursor: *"
属性来改变鼠标样式,其中*
替换为上述值之一。例如,要设置一个可点击的链接使用手型光标,可以这样写:
<a href="#" style="cursor: pointer;">点击这里</a>
您还可以使用URL指定自定义的光标图片文件,例如:
<div style="cursor: url('path/to/custom-cursor.cur'), auto;">悬停在这里</div>
请注意,不是所有浏览器都支持所有光标类型,特别是一些较旧或特定的光标类型。在使用自定义光标时,请确保目标浏览器支持该光标类型