網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

使用CSS爲內容設定特定的鼠標樣式(cursor)介紹

相信大家都知道我們的鼠標在網頁中不同的元素中有不同的顯示(例如 a 元素就顯示爲「箭頭指針」),但是其實我們還可以自定義這些有趣的東西哦!今天「暢想資源」就來教大家如何使用CSS爲內容設定特定的鼠標樣式(cursor),讓你的網頁更加的生動、活潑!

教學

以下的表格顯示了每一種樣式相應的CSS代碼,而只需將鼠標移動到對應的框格內就可以預覽效果啦!(各種系統、瀏覽器下的效果可能有所區別!) :mrgreen:

cursor: alias;
cursor: all-scroll;
cursor: auto;
cursor: cell;
cursor: context-menu;
cursor: col-resize;
cursor: copy;
cursor: crosshair;
cursor: default;
cursor: e-resize;
cursor: ew-resize;
cursor: grab;
cursor: grabbing;
cursor: help;
cursor: move;
cursor: n-resize;
cursor: ne-resize;
cursor: nesw-resize;
cursor: ns-resize;
cursor: nw-resize;
cursor: nwse-resize;
cursor: no-drop;
cursor: none;
cursor: not-allowed;
cursor: pointer;
cursor: progress;
cursor: row-resize;
cursor: s-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: text;
cursor: url(http://file.arefly.com/favicon.ico), url(myBall.cur), auto;
cursor: vertical-text;
cursor: w-resize;
cursor: wait;
cursor: zoom-in;
cursor: zoom-out;
cursor: initial;

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

本文固定鏈接:http://www.arefly.com/css-cursor/

本文章由「」於2014年12月06日發表於「網路」分類

你可以發表迴響,並在保留原文地址及作者的情況下引用到你的網站

轉載請注明:使用CSS爲內容設定特定的鼠標樣式(cursor)介紹 | 暢想資源

關鍵字:, ,

以下是廣告時間,廣告內容僅供參考!

廣告載入中...

使用CSS爲內容設定特定的鼠標樣式(cursor)介紹:目前有 30 條留言

訪客以 20:11 大幅領先博主

迴響載入中,請稍等...
  1. 17樓
    云落 China Mozilla Firefox Windows

    哪个图标的挺有意思的,可以研究下

    [回覆]
  2. 16樓
    梦想网络 China Mozilla Firefox Windows

    报个到。今天簽到啦!時間:下午8:05:38(使用Arefly評論框自動簽到)

    [回覆]
  3. 15樓
    Jason Cooper China Mozilla Firefox Windows

    我打好的评论没了..........再也不相信爱情了.............

    [回覆]
  4. 14樓
    IELTS代攷 China Google Chrome Windows

    繁体字看的头晕...

    [回覆]
  5. 13樓
    Me.稀奇 China Google Chrome Windows

    这个不错也,不过我都是默认的。

    [回覆]
  6. 12樓
    综合搜索 China Google Chrome Windows

    好文章!支持一下! :idea:

    [回覆]
  7. 11樓
    温柔绕指尖 China Google Chrome Windows

    繁体字啊~~

    [回覆]
  8. 10樓
    香港云主机 China Google Chrome Windows

    站长你好,恒创推出买主机送平板,独立IP专享7折优惠,礼品有限,先到先得,年底最后再一次任性!!

    [回覆]
  9. 9樓
    破折君 China Mozilla Firefox Windows

    没认真学习CSS呢,虽然说想学下。。。

    [回覆]
  10. 8樓
    圆管桁架 China Mozilla Firefox Windows

    支持下

    [回覆]
  11. 7樓
    自由天空 China Google Chrome Windows

    好文 支持

    [回覆]
  12. 6樓
    凯凯 China Google Chrome Windows

    今天簽到啦!時間:下午4:33:27(使用Arefly評論框自動簽到) :p

    [回覆]
  13. 5樓
    凯凯 China Google Chrome Windows

    请问你评论里的表情延迟加载是如何实现的呢?找了好久没找到教程呀 :?:

    [回覆]
    • :laugh: :laugh: 表情延遲加載是指點擊「表情」後才出現還是怎樣? :?: :?:

      [回覆]
      • 凯凯 China Safari  Android 2.3.6 Nexus S Build/GRK39F

        是表情的这个lazy load,跟图片一样的,屏幕滚动上来图片才显示,就是你表情连接里的这个 original。
        请问有教程吗?我没找到呜呜呜

        [回覆]
  14. 4樓
    恋羽 China Google Chrome Windows

    CSS而已,虽然很有用

    [回覆]
  15. 3樓
    Rich China 搜狗浏览器 Windows

    今天簽到啦!時間:21:45:38(使用Arefly評論框自動簽到) :grin: :grin:

    [回覆]
    • :idea: 今天簽到啦!時間:上午7:44:47(使用Arefly評論框自動簽到)

      [回覆]
  16. 2樓
    wu1yi2fan China Mozilla Firefox Windows

    没有任何代码……这是要自己开FireBug扒代码的节奏么= =

    [回覆]
  17. 沙發
    Sang China Google Chrome Windows

    頭香XD

    [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter