琳瑯滿目的cursor屬性值

友情不友情的小提示：☆（表示常用）

• 常規(guī)

  • cursor: auto; 默認(rèn)值

    • 輸入框表現(xiàn)是cursor: text (文本光標(biāo))
    • href屬性的鏈接表現(xiàn)為cursor: pointer (手形光標(biāo))
    • button表現(xiàn)為cursor: default (默認(rèn)箭頭)

  • ☆ cursor: default; 系統(tǒng)默認(rèn)光標(biāo)

    • 誤區(qū)產(chǎn)生的小故事：
      • 由于瀏覽器原生按鈕樣式兼容方面無法完善，尤其是IE盛行的年代，黑框、寬高不一致等問題層出不窮， 于是大家就使用a標(biāo)簽來模擬按鈕，在每次hover上去的時(shí)候都會(huì)有一個(gè)手型效果，省去了額外添加， 所以久而久之就成了業(yè)內(nèi)約定俗成的做法了

  • cursor: none; 這是讓光標(biāo)隱藏不見

    • what? 有何用？它的作用在看視屏的時(shí)候，全屏后鼠標(biāo)靜止不動(dòng)3秒鐘，就設(shè)置隱藏光標(biāo)效果
    • IE8不支持，還要通過自定義光標(biāo)來處理

    // 自定義光標(biāo)
    .cur-none {
        cursor: url(transparent.cur), auto;
    }
    :root .cur-none {   // IE9+
        cursor: none
    }
    復(fù)制代碼
    

• 鏈接和狀態(tài)

  • ☆ cursor: pointer; 手形

  • cursor: help; 幫助光標(biāo)

    • 用在幫助鏈接或者提示信息的問號(hào)小圖標(biāo)上
    • 不過目前很少在網(wǎng)頁上看到，更多的是使用cursor:pointer手形處理

  • cursor: progress; 進(jìn)行中

    • 一個(gè)適用場景是網(wǎng)頁加載js的情況，網(wǎng)絡(luò)不好時(shí)，加載js時(shí)間過長

    body {
        cursor: progress;
    },
    // 當(dāng)js加載完成后再將光標(biāo)cursor設(shè)為auto;
    // 增加了用戶體驗(yàn)
    document.addEventListener('DOMContentLoaded', () => {
        document.body.style.cursor = 'auto';
    });
    復(fù)制代碼
    

  • cursor: wait;

    • 沒用的光標(biāo)，有個(gè)沙漏的樣子

  • cursor: context-menu;

    • 上下文菜單，兼容性很復(fù)雜，汽油桶形狀，用處不大

• 選擇

  • ☆ cursor: text; 文字可被選中

    • input默認(rèn)光標(biāo)表現(xiàn)就是cursor:text
      • 但是如果設(shè)置了disabled后，光標(biāo)會(huì)自動(dòng)變成cursor:default
    • 還有如果在現(xiàn)代瀏覽器中不允許文字選中的情況下，設(shè)置了user-select:none后，還要把對(duì)應(yīng)的光標(biāo)改變?yōu)閏ursor:default

    p {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        cursor: default;
    }
    <p>弱水三千</p>
    // 不過現(xiàn)在最新版的瀏覽器都自動(dòng)設(shè)置了cursor:default
    復(fù)制代碼
    

  • cursor: vertical-text;

    • 垂直選中，文字排版是垂直情況的時(shí)候，基本沒機(jī)會(huì)用到

  • cursor: crosshair;

    • 十字光標(biāo)，它比較適合取色工具的場景中，平時(shí)用不到

  • cursor: cell;

    • 單元格光標(biāo)，適合開發(fā)類似Excel表格的網(wǎng)頁使用
    • 而且IE8還不支持，需要自定義，也是沒機(jī)會(huì)表現(xiàn)了

• 拖拽

  • ☆ ccursor: move;
    • 移動(dòng)光標(biāo)，表示當(dāng)前元素是可移動(dòng)的
    • 常用的彈窗組件給標(biāo)題欄加上cursor:move，讓用戶知道是可以拖動(dòng)的
  • cursor: copy;
    • 復(fù)制光標(biāo)，表示當(dāng)前元素可以復(fù)制，IE8不支持，需自定義，無實(shí)用
  • cursor: alias;
    • 別名光標(biāo)，表示當(dāng)前元素可以創(chuàng)建別名或快捷方式，同上copy一樣，沒個(gè)卵用
  • cursor: no-drop與cursor: not-allowed;
    • 樣式相同，都表示禁止的
    • 值得注意的是：
      • 不要給禁用按鈕加cursor: not-allowed
      • 因?yàn)樗臓顟B(tài)只與拖拽行為相關(guān)
      • 所以禁用按鈕光標(biāo)還是用default更合適

• 都是CSS3新增的光標(biāo)類型

  • 縮放

    • cursor: zoom-in; 放大
    • cursor: zoom-out; 縮小

  • 抓取

    • cursor: grab; 五指張開的手
    • cursor: grabbing; 五指收起的手
    • Chrome下還需要加-webkit前綴生效
    • 這里QQ音樂PC端做了這樣的cursor處理，如下圖框選的位置
    image.png

• 自定義光標(biāo)
  • 遇到一些IE8不支持的光標(biāo)類型，可以通過自定義的手段來實(shí)現(xiàn)兼容
  • chrome等瀏覽器可以直接使用png圖片作為光標(biāo)
  • IE不行，它還是要用專門的.cur格式
  • 而自定義光標(biāo)最大的作用其實(shí)是根據(jù)業(yè)務(wù)需求對(duì)光標(biāo)進(jìn)行樣式上的自定義
  • 不過現(xiàn)在用的真是不多了

以上內(nèi)容就介紹完了用戶界面樣式的全部內(nèi)容了，還有最后一章的冷知識(shí)，大家不要方，繼續(xù)看下去，了解一下，了解一下，了解一下

作者：chenhongdong
鏈接：https://juejin.im/post/5b406f40e51d45194832b759
來源：掘金