css中cursor的用法

2024年1月31日发(作者：)

css中cursor的用法

Cursor 是 CSS 中一个常用的属性，用来设定光标在不同元素上的外观，其可以接受的取值有多种，甚至可以使用自定义的图片作为光标的显示外观。

Cursor 的主要作用是为 HTML 元素指定光标的外观，有了它，你可以通过调整光标外观来提醒用户，它可以直观地反映出用户当前的操作环境。使用其它 Cursor 属性也可以更快速地修改光标外观，比如：

1. auto：自动，根据不同元素使用不同的默认光标

2. default：箭头

3. pointer：手型

4. move：移动

air：十字线

6. text：文本

7. wait：等待

8. help：帮助

9. url()：使用自定义的图片作为光标

10. progress：展示加载进度的光标

设置光标的方法就是直接在需要设置的 HTML 元素里添加 CSS

属性 cursor，格式如下：

div {

- 1 -

cursor: pointer;

}

使用这个属性可以让你改变元素的默认光标，比如将默认的箭头改为手型，或者使用自定义的图片作为光标等。

在很多情况下，设置 cursor 属性可以帮助你有效地提示用户，例如，当用户鼠标移到按钮上时，光标变成手型，提示用户这是可点击的按钮；当光标移动到图片上时，光标会改变，这样就可以直观提醒用户这是可以点击的元素。因此，使用 cursor 属性可以有效地改善用户体验，也是非常重要的一环。

- 2 -