CSS中设置鼠标样式

CSS中设置鼠标样式cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状所有主流浏览器都支持cursor属性。注释:Opera9.3和Safari3不支持 url 值。注释:任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。定义和用法cursor属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个…

大家好,又见面了,我是你们的朋友全栈君。

cursor规则是设定网页浏览时用户鼠标指针的样式,也就是鼠标的图形形状

所有主流浏览器都支持 cursor 属性。

注释:Opera 9.3 和 Safari 3 不支持 url 值。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

定义和用法

cursor 属性规定要显示的光标的类型(形状)。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

默认值: auto
继承性: yes
版本: CSS2
JavaScript 语法: object.style.cursor=”crosshair”

可能的值

描述
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

使用方法

.span {
    cursor:pointer //设定鼠标的形状为一只伸出食指的手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式
}
.span {
    cursor:default //设定鼠标的形状为箭头,,crosshair 十字,progress 箭头和沙漏等等
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/138206.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JSON字符串转List集合操作「建议收藏」

    JSON字符串转List集合操作「建议收藏」场景:JSON字符串转List集合与List集合转JSON字符串使用的jar包是fastjson-1.2.41.jar1.JSON字符串转List集合操作publicstatic<T>List<T>parseArray(Stringtext,Class<T>clazz){try{re…

    2022年5月14日
    39
  • nginx最全教程_nginx使用教程

    nginx最全教程_nginx使用教程location[=|~|~*|^~]patt{}中括号可以不写任何参数,此时称为一般匹配也可以写参数因此,大类型可以分为3种location=patt{}[精准匹配]locationpatt{}[一般匹配]location~patt{}[正则匹配]——————————————–如何发挥作用?:首先看有没有精准匹配…

    2025年5月23日
    3
  • laravel 文件上传总结

    laravel 文件上传总结

    2021年11月10日
    40
  • 电子书包“翻转”课堂

    电子书包“翻转”课堂在联想·知好乐电子书包发布会上,一场别开生面的现场教学示范引起了与会者的极大兴趣。北京教育学院的王春老师借助联想·知好乐电子书包,创新出一种名为“翻转课堂”的教学模式,就是将原来课堂上老师教授新知的环节“翻转”为课前学生自主学习,并将原来课下学生的知识内化过程“翻转”到课上。与会的教育行业专家认为,这是一种更符合学习规律、更尊重学生认知的高效的教学方式。  据同方知好乐教育公司(以下简称知好乐)总…

    2022年10月19日
    2
  • 2014年度总结

    2014年度总结2015都过了近1个月了,早该好好总结一下了。   2014年,对我来说,意味着忙乱、匆促、迷惑、徘徊,还有最准确的表达:抉择!   还是老规矩,分别从生活、工作、学习三个维度来回顾。  【生活篇】   (1)陪伴妻儿     看着儿子一天天长大,仿佛每一天都有新的变化:从可以走路,到能说完整的句子,每一个关键事件,都让我和老婆欣喜不已!当

    2022年7月12日
    18
  • win10 pycharm安装教程_社区版pycharm安装教程

    win10 pycharm安装教程_社区版pycharm安装教程一、官网下载安装包:https://www.jetbrains.com/pycharm/download/#section=windows这里下载的是Pycharm社区版:二、安装Pycharm安装前先在本地新建一个文件夹,后面把pycharm安装在指定路径:1、直接双击运行,点击Next:2、选择指定路径安装,并继续点击Next:3、继续下一步,全部勾选,点击Next:4、接着点击Install安装:5、安装完成,点击f…

    2022年8月29日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号