个性化阅读
专注于IT技术分析

css光标cursor属性和样式 – CSS高级教程

点击下载

上一章CSS高级教程请查看:css轮廓outline属性和样式

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

改变光标的外观

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

h1 {
    cursor: move;
}
p {
    cursor: text;
}

下表演示了大多数浏览器将接受的不同光标,将鼠标指针放在输出列中的“TEST”链接上,以显示光标(外观可能预览不了,可以自行逐一尝试)。

外观   例子
default a:hover{cursor:default;}
pointer a:hover{cursor:pointer;}
text a:hover{cursor:text;}
wait a:hover{cursor:wait;}
help a:hover{cursor:help;}
progress a:hover{cursor:progress;}
crosshair a:hover{cursor:crosshair;}
move a:hover{cursor:move;}
url() a:hover{cursor:url("custom.cur"), default;}

创建自定义光标

也可以使用完全定制的光标。

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

如果用户定义的光标没有一个是有效的,或者浏览器不支持,那么将使用列表末尾的通用光标。

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

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

在上面的例子中,custom.gif和custom.cur是自定义光标文件,上传到服务器空间,默认情况下是通用光标,如果自定义光标丢失或查看器的浏览器不支持自定义光标,将使用该光标。

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

注意:IE9和更早的版本只支持.cur类型的URL值(用于静态光标)和.ani类型的URL值(用于动画光标)。然而,Firefox、Chrome和Safari等浏览器支持.cur、.png、.gif和.jpg,但不支持.ani。

赞(0)
未经允许不得转载:srcmini » css光标cursor属性和样式 – CSS高级教程

评论 抢沙发

评论前必须登录!