css中光标的设置,CSS Cursors(光标)

CSS Cursors(光标)

CSS光标属性,用于在鼠标移至某个区域或网页上的链接时定义光标类型(即鼠标指针)。

改变光标的外观

浏览器通常将鼠标指针显示在网页的任何空白部分上,带手套的手显示在任何链接或可单击的项目上,将编辑光标显示在任何文本或文本字段上。使用CSS,您可以重新定义这些属性以显示各种不同的光标。

示例h1 {

cursor: move;

}

p {

cursor: text;

}测试看看‹/›

下表演示了大多数浏览器将接受的不同光标。将鼠标指针放在输出列中的“ TEST”链接上,以显示该光标。

查看值示例查看

《css中光标的设置,CSS Cursors(光标)》defaulta:hover{cursor:default;}

《css中光标的设置,CSS Cursors(光标)》pointera:hover{cursor:pointer;}

《css中光标的设置,CSS Cursors(光标)》texta:hover{cursor:text;}

《css中光标的设置,CSS Cursors(光标)》waita:hover{cursor:wait;}

《css中光标的设置,CSS Cursors(光标)》helpa:hover{cursor:help;}

《css中光标的设置,CSS Cursors(光标)》progressa:hover{cursor:progress;}

《css中光标的设置,CSS Cursors(光标)》crosshaira:hover{cursor:crosshair;}

《css中光标的设置,CSS Cursors(光标)》movea:hover{cursor:move;}

《css中光标的设置,CSS Cursors(光标)》url()a:hover{cursor:url(“custom.cur”), default;}

创建自定义光标

也可以具有完全自定义的光标。

cursor属性处理用户定义的光标值的逗号分隔列表,后跟通用光标。如果第一个光标指定不正确或找不到,则将使用逗号分隔列表中的下一个光标,依此类推,直到找到可用的光标为止。

如果没有用户定义的光标有效或不受浏览器支持,则将使用列表末尾的通用光标。

提示:可以用于光标的标准格式是该.cur格式。但是,您可以使用在线免费提供的图像转换器软件将诸如.jpg和的图像转换.gif为.cur格式。

示例a {

cursor: url(“custom.gif”), url(“custom.cur”), default;

}测试看看‹/›

在上面的示例中custom.gif,custom.cur是自定义光标文件,已上传到您的服务器空间,并且default是通用光标,如果自定义光标丢失或查看器的浏览器不支持它,则将使用该通用光标。

警告:如果要声明自定义光标,则必须在列表末尾定义一个通用光标,否则该自定义光标将无法正确呈现。

这是自定义光标的现场演示。

注意: IE9和更早版本仅支持.cur静态光标和.ani动画光标的URL值。然而,浏览器如Firefox,Chrome和Safari浏览器有支持的.cur,.png,.gif和.jpg,但不会.ani。

    原文作者:weixin_39744512
    原文地址: https://blog.csdn.net/weixin_39744512/article/details/119371975
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞