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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ICMP报文分析

    ICMP报文分析

    2021年11月14日
    54
  • 什么是java单例模式?[通俗易懂]

    什么是java单例模式?[通俗易懂]关于java单例模式的文章早已是非常多了,本文是对我个人过往学习java,理解及应用java单例模式的一个总结。此文内容涉及java单例模式的基本概念,以及什单例模式的优缺点,希望对大家有所帮助。什么是java单例模式?单例模式是保证类的实例是单例的一种常见设计模式。单例模式的优点:(1)首先肯定是节省内存资源,不管多频繁的通过暴露的方法创建实例,都能保证创建的对象在系统内存中是同一实例对象;(2)灵活性,由于所有实例的创建都由该类控制,所有该类可以灵活的更改实例化过程;(3)实例的

    2022年8月11日
    7
  • 面试题之  什么是不可变类? 为什么String是不可变类? 如何创建一个不可变类

    面试题之  什么是不可变类? 为什么String是不可变类? 如何创建一个不可变类面试题:     什么是不可变类? 为什么String是不可变类? 如何创建一个不可变类不可变类当类的对象创建后,它的值就不可以再更改了相比于可变对象,不可变对象有很多优势不可变对象可以提高String Pool(字符串常量池)的效率和安全性。如果你知道一个对象是不可变的 ,那么需要拷贝对象的内容时就不用复制它本身而只复制它的地址,复制地址(通常一个指针的大小)需要很小的内存,效率…

    2022年6月13日
    32
  • PCIe 1. PCI与PCIe学习一——硬件篇

    PCIe 1. PCI与PCIe学习一——硬件篇最近在学习驱动开发过程中涉及到PCI相关知识,在网上看了很多文章,良莠不齐,我总结一下比较好的文章分享给大家,那就从源头开始说起。PCI总线和设备树是X86硬件体系内很重要的组成部分,几乎所有的外围硬件都以这样或那样的形式连接到PCI设备树上。虽然Intel为了方便各种IP的接入而提出IOSF总线,但是其主体接口(primaryinterface)还依然是PCIe形式。我们下面分成两部分介绍PCI和他的继承者PCIe(PCIexpress):第一部分是历史沿革和硬件架构;第二部分是软件界面和U

    2022年6月20日
    33
  • 亲测解决 :Navigation cancelled from “xxx“ to “xxx“ with a new navigation

    亲测解决 :Navigation cancelled from “xxx“ to “xxx“ with a new navigation使用vue3.0写了一个登入页面,再点击登入的时候,第一次点击会没有反应,F12查看接口都调用了但是没有跳转,控制台打印出错:错误说有异常没有捕获;这个错误是vue-router内部的错误,没有进行catch处理导致的;再vue-router3.0以上的版本新增功能:push和replace方法会返回一个promise;解决方案:在vue的router的js中添加下面代码constoriginalPush=VueRouter.prototype.pushconstorigin

    2022年7月26日
    12
  • 仪器保养 | 安捷伦DSO-X 2002A示波器自检测/自校准

    仪器保养 | 安捷伦DSO-X 2002A示波器自检测/自校准安捷伦DSO-X2002A示波器自检测、自校准首先上电开机1.按下Utility-服务-Diagnostics-硬件本机自检-前面板自检2.按下Utility-服务-Calibration–按下后盖CAL-开始用户校准-根据提示完成操作感兴趣的话就跟安迪一起来学习吧~仪器保养|安捷伦DSO-X2002A示波器自检测/自校准…

    2022年10月11日
    3

发表回复

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

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