189 8069 5689

CSS中的cursor属性实例用法

本篇内容介绍了“CSS中的cursor属性实例用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司专注于东昌府企业网站建设,响应式网站开发,商城网站开发。东昌府网站建设公司,为东昌府等地区提供建站服务。全流程定制制作，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

一、开篇之言

CSS3的领域范围已经渗透到了cursor属性（鼠标手形）。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing.

本文重在展示，开阔眼界。
二、zoom-in/zoom-out组合

zoom-in/zoom-out可以让元素的鼠标形状变成“放大镜”或者“放小镜”。如下：
CSS中的cursor属性实例用法CSS中的cursor属性实例用法

于是，我们实现类似微博图片查看大图效果时候，就不需要再自己额外制作一个.cur文件了，直接如下寥寥CSS代码即可：

CSS Code复制内容到剪贴板

  1. .zoom-in {   

  2.     cursor: zoom-in; /* 大大大 */  

  3. }   

  4. .zoom-out {   

  5.    cursor: zoom-out; /* 小小小 */  

  6. }  

您可以狠狠地点击这里：cursor属性之zoom-in/zoom-out值测试demo

于是，鼠标移到御用妹子身上，就会出现放大镜手形，如下截图（无关紧要区域涂白，节约大小）：
CSS中的cursor属性实例用法

点击放大，再点击缩小。

兼容性
目前， 除了IE浏览器（包括IE11），PC端的其他浏览器全线支持zoom-in/zoom-out。
CSS中的cursor属性实例用法

貌似Safari还需要私有前缀。
三、grab/grabbing组合

grab/grabbing可以让元素的鼠标形状变成“咸猪手”以及“抓奶手”，如下（截自Chrome, FireFox浏览器下的手要好看些）：
CSS中的cursor属性实例用法CSS中的cursor属性实例用法

此手形在实现内容拖拽移动的时候再合适不过了，不需额外制作一个.cur文件了，直接如下寥寥CSS代码即可：

CSS Code复制内容到剪贴板

  1. .grab { /* 抓抓抓 */  

  2.     cursor: -webkit-grab;   

  3.     cursor: -moz-grab;   

  4.     cursor: grab;   

  5. }   

  6. .grabbing { /* 抓住抓住 */  

  7.     cursor: -webkit-grabbing;   

  8.     cursor: -moz-grabbing;   

  9.     cursor: grabbing;   

  10. }  

您可以狠狠地点击这里：cursor属性之grab/grabbing值测试demo

于是，你就可以上下拖拽腐女漫画感受基爱满满~
CSS中的cursor属性实例用法

兼容性
目前， 除了IE浏览器（包括IE11），PC端的其他浏览器全线支持grab/grabbing.

但是，现在这些浏览器还需要添加私有前缀。

“CSS中的cursor属性实例用法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


网页标题：CSS中的cursor属性实例用法
网站网址：http://jkwzsj.com/article/jcidpo.html

其他资讯