舉例詳解CSS中的cursor屬性
我要評論一、開篇之言
CSS3的領(lǐng)域范圍已經(jīng)滲透到了cursor屬性（鼠標(biāo)手形）。這里簡單介紹兩個(gè)相當(dāng)實(shí)用的組合zoom-in/zoom-out以及grab/grabbing.
本文重在展示，開闊眼界。
二、zoom-in/zoom-out組合
zoom-in/zoom-out可以讓元素的鼠標(biāo)形狀變成“放大鏡”或者“放小鏡”。如下：
于是，我們實(shí)現(xiàn)類似微博圖片查看大圖效果時(shí)候，就不需要再自己額外制作一個(gè).cur文件了，直接如下寥寥CSS代碼即可：
- .zoom-in {
- cursor: zoom-in; /* 大大大 */
- }
- .zoom-out {
- cursor: zoom-out; /* 小小小 */
- }
您可以狠狠地點(diǎn)擊這里：cursor屬性之zoom-in/zoom-out值測試demo
于是，鼠標(biāo)移到御用妹子身上，就會出現(xiàn)放大鏡手形，如下截圖（無關(guān)緊要區(qū)域涂白，節(jié)約大小）：
點(diǎn)擊放大，再點(diǎn)擊縮小。
兼容性
目前， 除了IE瀏覽器（包括IE11），PC端的其他瀏覽器全線支持zoom-in/zoom-out。
貌似Safari還需要私有前綴。
三、grab/grabbing組合
grab/grabbing可以讓元素的鼠標(biāo)形狀變成“咸豬手”以及“抓奶手”，如下（截自Chrome, FireFox瀏覽器下的手要好看些）：
此手形在實(shí)現(xiàn)內(nèi)容拖拽移動(dòng)的時(shí)候再合適不過了，不需額外制作一個(gè).cur文件了，直接如下寥寥CSS代碼即可：
- .grab { /* 抓抓抓 */
- cursor: -webkit-grab;
- cursor: -moz-grab;
- cursor: grab;
- }
- .grabbing { /* 抓住抓住 */
- cursor: -webkit-grabbing;
- cursor: -moz-grabbing;
- cursor: grabbing;
- }
您可以狠狠地點(diǎn)擊這里：cursor屬性之grab/grabbing值測試demo
于是，你就可以上下拖拽腐女漫畫感受基愛滿滿~
兼容性
目前， 除了IE瀏覽器（包括IE11），PC端的其他瀏覽器全線支持grab/grabbing.
但是，現(xiàn)在這些瀏覽器還需要添加私有前綴。
四、結(jié)束語
如果你有類似上面的需求，不妨漸進(jìn)增強(qiáng)使用下瀏覽器自帶的手形。如果你的項(xiàng)目對瀏覽器沒有要求，比方說工具或內(nèi)網(wǎng)之類，就可以很happy使用這些新特性。
相關(guān)文章
css之Display、Visibility、Opacity、rgba和z-index: -1的區(qū)別
這篇文章主要介紹了css之Display、Visibility 和 Opacity 的區(qū)別,方便我們后期根據(jù)需要選擇，需要的朋友可以參考下2020-11-07- 這篇文章主要介紹了詳解CSS-opacity子元素繼承父元素透明度的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面2020-09-08
詳解css透明度之rgba和opacity的區(qū)別及兼容
對于設(shè)置透明度，我們有兩個(gè)可以選的css3屬性：rgba 和 opacity。這篇文章主要介紹了詳解css透明度之rgba和opacity的區(qū)別及兼容，感興趣的可以一起跟隨小編來了解一下2019-01-10- CSS 圖像透明度opacity想必大家并不陌生吧，使其可以讓圖片或者頁面擁有透明效果，下面為大家講解下CSS opacity的使用及其兼容性，感興趣的朋友可以參考下2013-09-08
詳解CSS中postion和opacity及cursor的特性
background-postion接收多個(gè)值在瀏覽器中已經(jīng)兼容，我們可以用background-position來代替calc()函數(shù)，從而去實(shí)現(xiàn)左方向或右方向的定位，這篇文章主要介紹了詳解CSS中postio2022-08-08
