CSS:CSS cursor 属性
| ylbtech-CSS:CSS cursor 属性 |
| 1.返回顶部 |
实例
一些不同的光标:
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 cursor 属性。
注释:Opera 9.3 和 Safari 3 不支持 url 值。
注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
定义和用法
cursor 属性规定要显示的光标的类型(形状)。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。
| 默认值: | auto |
|---|---|
| 继承性: | yes |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.cursor="crosshair" |
可能的值
| 值 | 描述 |
|---|---|
| url |
需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
| default | 默认光标(通常是一个箭头) |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针(一只手) |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
| n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动(南)。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
| help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
TIY 实例
- 改变光标
- 本例演示如何改变光标。
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS:CSS cursor 属性的更多相关文章
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- CSS中cursor属性给标签加上小手形状
HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...
- (二)学习CSS之cursor属性
参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <bod ...
- CSS中cursor属性
光标类型 CSS十字准心 cursor: crosshair;手 cursor: pointer;cursor: hand;写两个是为了照顾IE5,它只认hand.等待/沙漏 cursor: wa ...
- 光标显示样式 css 中 cursor 属性使用
记录一下 cursor 的各种样式,方便自己查找.之前用到不常用的每次去 百度 或 Google 找不如自己记录下好找些. cursor光标类型 auto default none context-m ...
- Css之cursor 属性
url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏 ...
- css cursor属性-显示的光标的类型(形状)的用法和定义
在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 【CSS】按钮的禁用与可用 CSS Cursor 属性
禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...
随机推荐
- angular - 小结
引入样式: 导入全局 - >styles.css 导入第三方 - > 在package.json配置,然后再 npm install 安装好以后,最后再angular.json里面的sty ...
- 网站的根目录下有一个文件robots.txt ,它是啥?
我相信很多人有过这个疑问,这个robots文件是干嘛的? 我想问,各位搜索淘宝时,是否发现(禁止爬虫抓取提供快页) 关于详细语法,请看:http://zhidao.baidu.com/question ...
- android-BroadcastReceive广播接收器
应用可以使用它对外部事件进行过滤,只对感兴趣的外部事件(如当电话呼入时,或者数据网络可用时)进行接收并做出响应.广播接收器没有用户界面.然而,它们可以启动一个activity或service来响应它们 ...
- [转]si设置
好吧,我有代码格式的强迫症,代码不整齐,我看的都头疼,之前一直喜欢用SourceStyler C++的,但是这个在win7下貌似不能使用,只能转向astyle了. http://www.cnblogs ...
- AOSP ON MAKO(在NEXUS 4上刷ANDROID 4.4 源代码包-下载/配置/编译/刷机)
AOSP ON MAKO(在NEXUS 4上刷ANDROID 4.4 源代码包-下载/配置/编译/刷机) 特别感谢google官方文档及AOSP源代码开放 參考链接: https://source.a ...
- API网关如何实现对服务下线实时感知
上篇文章<Eureka 缓存机制>介绍了Eureka的缓存机制,相信大家对Eureka 有了进一步的了解,本文将详细介绍API网关如何实现服务下线的实时感知. 一.前言 在基于云的微服务应 ...
- EasyDarwin接入ffmpeg实现264转图片快照功能
本文转自:http://blog.csdn.net/cai6811376/article/details/51774467 EasyDarwin一直坚持开源精神,所以我们着手把EasyDarwin中使 ...
- 解决Pods Unable to find a specification for `xxxxx`问题
错误信息为 Unable to find a specification for *RMQClient* (~> 1.x.x) depended upon by Podfile 刚开始以为这个已 ...
- sticky session 粘性会话
New Elastic Load Balancing Feature: Sticky Sessions | AWS News Blog https://amazonaws-china.com/cn/b ...
- 如何分析和提高大型项目(C/C++)的编译速度?(VS2015特有的:/LTCG:incremental选项)
常见的有几个:1. Precompile header2. 多线程编译3. 分布式编译4. 改code,减少依赖性 另外还有一个VS2015特有的:/LTCG:incremental选项.以前为了执行 ...
