html中怎么改变鼠标形状,css鼠标样式语法及20种可选值(属性)
我们对Windows各种各样的鼠标样式都不陌生,当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化,同充满动感的网页显得不怎么和谐。这里教大家用CSS来定义20种种鼠标样式形状。在CSS中,使用cursor属性来定义鼠标的样式。
用css控制鼠标样式的语法如下:
文本或其它页面元素
把 * 换成如下20个可选值的一种:
cursor属性取值如下,默认值为default。大家可能会说,cursor属性值这么多,怎么记呀?其实大家不用担心,在实际开发中,我们一般只用到“default”和“pointer”这两个属性值,其他的一般都很少用得上。如果实在没办法还需要其他的,那就回来查这种表就行了。
crosshair;
十字准心
The cursor render as a crosshair
光标表现为十字准线
cursor: pointer;
cursor: hand;
写两个是为了照顾IE5,它只认hand。
手
The cursor render as a pointer (a hand) that indicates a link
光标标以暗示(手指)的形式来表明有一个连接
cursor: wait;
等待/沙漏
The cursor indicates that the program is busy (often a watch or an hourglass)
光标暗示当前程序正忙(一般为一块表或是一个沙漏)
cursor: help;
帮助
The cursor indicates that help is available (often a question mark or a balloon)
光标暗示当前位置可得到帮助(一般为问号或是气球)
cursor: no-drop;
无法释放
cursor: no-drop;
cursor: text;
文字/编辑
The cursor indicates text
光标暗示当前所处位置为文字内容
cursor: move;
可移动对象
The cursor indicates something that should be moved
光标暗示一些东西应该被移动
cursor: n-resize;
向上改变大小(North)
The cursor indicates that an edge of a box is to be moved up (north)
边缘可向上移动(北)
cursor: s-resize;
向下改变大小(South)
The cursor indicates that an edge of a box is to be moved down (south)
边缘可向下方移动(南)
cursor: e-resize;
向右改变大小(East)
The cursor indicates that an edge of a box is to be moved right (east)
box边缘可向右(东)边移动
cursor: w-resize;
向左改变大小(West)
The cursor indicates that an edge of a box is to be moved left (west)
边缘可向左移动(西)
cursor: ne-resize;
向上右改变大小(North East)
The cursor indicates that an edge of a box is to be moved up and right (north/east)
光标暗示box的边缘可向右上方移动(东北方向)
cursor: nw-resize;
向上左改变大小(North West)
The cursor indicates that an edge of a box is to be moved up and left (north/west)
边缘可向左上方移动(西北)
cursor: se-resize;
向下右改变大小(South East)
The cursor indicates that an edge of a box is to be moved down and right (south/east)
边缘可向右下方移动(东南)
cursor: sw-resize;
向下左改变大小(South West)
The cursor indicates that an edge of a box is to be moved down and left (south/west)
边缘可向左下方移动(西南)
cursor: auto;
自动
The browser sets a cursor
浏览器设置一个光标
cursor:not-allowed;
禁止
cursor:not-allowed;
cursor: progress;
处理中
cursor: progress;
cursor: default;
系统默认
The default cursor (often an arrow)
默认的光标状态(通常为一个箭头)
cursor: url(' # ');
# = 光标文件地址 (注意文件格式必须为:.cur 或 .ani)。
用户自定义(可用动画)
The url of a custom cursor to be used.
自定义光标的url位置
Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意:在定义完自定义的光标之后在末尾加上一般性的光标,以防那些url所定义的光标不能使用
cursor的pointer与hand区别
cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标。那为什么有两个呢,这两个有什么区别呢?
用浏览器测试得出以下结论:
cursor:hand :IE完全支持。但是在 firefox 是不支持的,没有效果。
cursor:pointer :是 CSS2.0 的标准。所以 firefox 是支持的,但是 IE5.0 既之前版本不支持。IE6 开始支持。
所以为了兼容各个主流浏览器,尽量使用 cursor:pointer,而不要使用 cursor:hand。
实例:
实例
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}
尝试一下 »
在浏览器预览效果如下:
CSS Cursor鼠标指针样式兼容性参考表
下面分享一个鼠标指针样式兼容性在线参考表,黑色图标:表示该属性兼容此浏览器。灰色图标:表示该属性不兼容此浏览器。
html中怎么改变鼠标形状,css鼠标样式语法及20种可选值(属性)相关推荐
- css改变指针形状,css 指针样式
定义鼠标样式 cursor:pointer; 取值: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-res ...
- pyqt5-weidget-鼠标操作(鼠标形状、鼠标跟踪,QCursor)
一.设置鼠标形状 通过向setCursor()方法传递不同的枚举值,控制鼠标在其控件内的形状: 各个枚举值的效果: from PyQt5.Qt import * import sysapp = QAp ...
- coreldraw梯形校正_CorelDRAW中如何改变用形状识别所绘制对象的轮廓
原标题:CorelDRAW中如何改变用形状识别所绘制对象的轮廓 CorelDRAW的智能绘图工具能将手绘笔触识别转换成基本形状或平滑的曲线.它能自动识别多种形状,如椭圆,矩形,菱形,箭头,梯形等,并能 ...
- html代码怎么image标签里加鼠标形状变成手掌样式,给html标签加上鼠标划过小手样式...
给html标签加上鼠标划过小手样式 方法:给当前标签增加样式 style="cursor:pointer;" eg:增加返回箭头样式,给箭头增加小手 - 在style中添加curs ...
- html中按钮的形状,css button 样式
css 怎么去掉button默认样式 代码如下: .button{border:0px;background-color:transparent;background-image:url(你自定义背景 ...
- html中怎么设置滚动条效果,css滚动条样式怎么设置
为了做出更好的视觉效果,有时候需要用css改变浏览器或版块中滚动条的样式,那么应该怎么实现自定义滚动条样式呢? 一.设置css滚动条的7个属性说明(附参考图). 1 ::-webkit-scroll ...
- html中两端对其代码,CSS两端对齐语法及代码实例教学
/*CSS reset 顶部为css的重置代码*/ html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,Ari ...
- qt子控件单独指定鼠标形状等样式
我现在是这样的需求,在一个编辑器里,贴一个搜索面板(所以它的父窗口就是这个编辑器).编辑器的鼠标形状是文本编辑样式,而我这个搜索面板的鼠标悬浮样式默认也都变成这个文本编辑形状了,这个不符合我的要求.解 ...
- html 对话框 flatballoon,CSS纯样式实现箭头、对话框等形状
在使用第三方框架bootstrap的时候,本以为其是图片实现的小箭头,后来使用开发工具查看是用CSS来实现的,现记录如下: 理解完上面伪类的用法后,下面进入主题,直接贴上代码, border test ...
最新文章
- Flex 布局详解 - 转自阮一峰老师
- 一场科技盛宴,一次“盈”满天下 安创成长营五期Demo Day完美收官
- Node.js模拟发起http请求从异步转同步的5种方法
- 利用STM32 的串口来发送和接收数据实验
- SendKeys中特殊字符的键代码
- 第7章:Kubernetes存储
- 网站计数器 web映射
- Matlab中求数据概率分布的方法
- Uvaoj10054 - The Necklace
- 联动下拉框显示省市县
- 向eclipse中导入myeclipse项目
- MVC实用架构设计(三)——EF-Code First(4):数据查询
- linux下client命令,Linux系统smbclient命令的使用方法
- Linux平台基于v4l2开发免驱摄像头-输出为Opencv Mat
- backtrack渗透测试中常用的命令总结
- 对Carrier IQ木马的综合分析报告
- matlab里面axis auto,Matlab中axis函数用法总结-Go语言中文社区
- PyTorch 2.0 重磅发布:一行代码提速 30%
- 它们改变了整个世界 盘点50个最伟大的游戏创意
- Matlab GUI自定义提示窗(对话框)
热门文章
- 阿里云天池AI龙珠计划-Python训练营考试题
- 计算机组成原理试题(五)(附参考答案)
- Kotlin使用Jectpack的Compose组件--基础环境构建
- Java计算租金递增,根据租金递增周期和递增率生成合同期限的所有月租金(租金计算)...
- 一文读懂智能汽车滑板底盘
- Cisco ❀ OSI开放式系统互联与TCP/IP
- ICOFormat.8bi(Photoshop Ico、Cur插件)的下载使用——使Photoshop支持ICO图片、CUR图片格式
- 『震惊』告诉你一个真实的上海薪水概念!!!
- Springboot项目配置定时重启案例
- Python OpenCV -- Canny 边缘检测 (十一)