css鼠标样式

在CSS中,cursor属性用于设置鼠标指针在悬停在元素上时的样式。以下是一些常用的cursor属性值及其描述:

  • default:显示系统默认的光标样式,通常是一个箭头。

  • pointer:表示可点击的链接或按钮,通常显示为手型。

  • move:指示可以移动的元素。

  • text:指示文本可被选中。

  • not-allowed:指示不允许操作的区域。

  • crosshair:显示十字准心,通常用于表格中可编辑的单元格。

  • help:显示帮助信息,通常以箭头加问号的形式。

  • wait:表示程序正在忙碌,如加载中。

  • progress:表示程序正在处理任务,但用户仍可执行其他操作。

  • cell:表示可选择一个单元格或一组单元格。

  • vertical-text:表示可选择垂直文本。

  • alias:表示创建别名或快捷方式。

  • copy:表示可以复制内容。

  • no-drop:表示不可放置元素。

  • all-scroll:表示元素的所有方向都可以滚动。

  • col-resizerow-resizen-resizes-resizee-resizew-resizens-resizeew-resizene-resizenw-resizese-resizesw-resizenesw-resizenwse-resize:分别表示不同方向的调整大小。

您可以通过在HTML元素上添加style="cursor: *"属性来改变鼠标样式,其中*替换为上述值之一。例如,要设置一个可点击的链接使用手型光标,可以这样写:

<a href="#" style="cursor: pointer;">点击这里</a>

您还可以使用URL指定自定义的光标图片文件,例如:

<div style="cursor: url('path/to/custom-cursor.cur'), auto;">悬停在这里</div>

请注意,不是所有浏览器都支持所有光标类型,特别是一些较旧或特定的光标类型。在使用自定义光标时,请确保目标浏览器支持该光标类型

Top