CSS3新的鼠标样式介绍
在Web开发的早期,随着新技术的不断涌现,一切都让人兴奋。但是我们在过去十年里经历了一个技术的停滞期,直到由于HTML5的出现,Web开发再次让人着迷。特别是CSS3正在迅速发展,你会在其规范里发现许多有趣的宝物。
在这篇文章里,我们要研究的是CSS鼠标样式属性,正如你所期望的的一样,它允许你改变在一个元素上移动鼠标时的指针样式。 它对于交互式Web App来说已经变得越来越重要。
CSS2的鼠标样式
CSS2中提供相对较少的选择(悬停在不同的网页元素上,看看鼠标指针样式是如何变化的):
CSS3的鼠标样式
在CSS3里我们有更多的样式可供选择。它们可以工作在IE9和火狐、Chrome、Safari、Opera的最新版本上(除非另有标注):
浏览器特定指针
Mozilla和Chrome、Safari的某些版本中提供了一些私有样式,这很可能成为CSS3规范的一部分:
创建你自己的指针
最后,你可以创建自己的指针图形,例如:
注意:
1. Internet Explorer需要一个Windows指针文件(.cur)。
2. 火狐、Chrome和Safari需要一幅图像 - 我推荐使用一张24位Alpha透明的PNG图片。
3. Firefox还需要一个非URL指针设置作为备用值。
4. Opera不支持这种写法。
5. x和y是Firefox、Chrome和Safari中的可选属性,它定义了图像从左上角开始的精确指针位置。如果省略,都默认为0。
挺好,但它看起来会花费我太多精力!所以我会一直坚持使用标准的指针样式...
译自:http://www.sitepoint.com/css3-cursor-styles/
作者:Craig Buckler于2011年1月5日
译者:蒋宇捷(转载请标明出处http://blog.csdn.net/hfahe)
CSS3新的鼠标样式介绍相关推荐
- web前端基础 html5+css3(九.精灵图,字体图标,css三角,鼠标样式cursor,.轮廓线 outline,vertical-align,文本溢出显示省略号)
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
- [转载]Qt之鼠标样式_vortex_新浪博客
原文地址:Qt之鼠标样式作者:一去丶二三里 Qt中可以自定义鼠标样式,无论是为了美观,还是遵从同行业标准,或者说是界面友好性都需要了解. 使用setCursor(Qt::CursorShape)来设置 ...
- html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)
CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:文本或其它页面元素 文本或其它页面元素 注意把 * 换成如下15个效果的一种: 下面是对这15 ...
- css hover变成手_css鼠标样式cursor介绍(鼠标手型)
CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:文本或其它页面元素 文本或其它页面元素 注意把 * 换成如下15个效果的一种: 下面是对这15 ...
- css鼠标样式cursor介绍(鼠标手型)
http://www.17jquery.com/div_css/55815/ CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:<span ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- 山东标梵Biaofun详解CSS3新特性
CSS3 新特性 CSS 盒模型 设置一个元素的背景颜色,背景颜色会填充哪些区域 margin/padding 设置百分比是相对谁的 link 和 @import 的区别 CSS 选择器的解析规则 C ...
- 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
- HTML5和CSS3新特性(完整版)
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...
最新文章
- 老照片修复、寻找系外行星……这里有8个超赞的机器学习项目
- FreeRtos学习笔记(11)查找就绪任务中优先级最高任务原理刨析
- java绘图板_Java中的画图板简单功能实现
- gmail头像_Gmail与Google+进一步整合:可显示好友头像
- C语言通过用户输入将八进制转为二进制(附完整源码)
- python telnet 交互_Python判断telnet通不通的实例
- 计算机无法正常更新,无法完成更新正在撤销更改请不要关闭你的计算机如何修复...
- 争时金融java_Java高并发编程基础之AQS
- JavaOne 2012:非阻塞数据结构如何工作?
- Date对象 IOS踩坑
- .tar.bz2文件解压命令
- sde执行revoke SELECT ANY TABLE from sde导致报ora-29900 运算符连接不存在错误
- Ubuntu下安装MeshLab教程
- 前端日志输出分享(没有技术,纯娱乐)
- 计算机网络蠕虫病毒及防范,蠕虫病毒检测与防范本科毕业论文.doc
- multsim 函数发生器的使用
- 正则表达式验证ip是否是内网ip
- 为Visual Studio创建项目模板(VSIX / C#/ 2019)
- 用js实现贪吃蛇网页游戏
- np.linalg.inv方法详解
热门文章
- linux安装主从mysql,mysql8.0安装以及主从复制搭建(linux)
- Java设计模式(二十):中介者设计模式
- 计算机网络:第六章 应用层
- ddl是什么意思网络语_DDL语句是啥
- mysql plugin 调用_MySQL插件接口的调用方式
- linux安装的mysql没有密码_linux系统安装的mysql数据库root帐户密码忘记的两种处理方法...
- 用IIS建立的.net网站通过IP地址不能访问解决方法
- mysql转oracle注意事项
- jQuery-处理class属性
- Linux上搭建Hadoop2.6.3集群以及WIN7通过Eclipse开发MapReduce的demo