Zi 字媒體

此篇文章瀏覽量： 1,503 前言 為了方便看目前有哪些游標可以使用，所以這裡列出了目前可以使用的游標，在 CSS 的語法裡，例如我要將游標換成 text，則可以寫成： .your_class{ cursor: text; } 上述的 text 可以直接換成以下方框的文字，滑鼠移過即可看到效果。 另外此篇文章也會告知你如何自訂游標。 CSS 2.1 游標 default crosshair help move pointer progress text wait e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize CSS 3 游標 none context-menu cell vertical-text alias copy no-drop not-allowed ew-resize ns-resize nesw-resize nwse-resize col-resize row-resize all-scroll zoom-in zoom-out 其它 Chrome 和 Safari 瀏覽器並不支援以下兩個： grab grabbing 指定游標來源路徑 像 grab 和 grabbing 在 Chrome 和 Safari 瀏覽器中並不支援，那為了要保持一致性，我們就必須要自行指定游標的來源來徑，例如： 此路徑 https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur 會顯示 此路徑 https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur 會顯示 另外的 png 圖路徑 http://notes.carlos-studio.com/images/1.png 會顯示 那麼就可以使用以下語法來讓 Chrome 和 Safari 也支援 grab 和 grabbing 的游標了，也可另外(another)指定客製的圖： .grab_class{ cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important; } .grabbing_class{ cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/closedhand.cur), default !important; } .another{ cursor: url(https://notes.carlos-studio.com/images/1.png), default !important; } grab grabbing another 這樣就可以很方便的查閱了。 如有任何問題，歡迎下方留言喔！ 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet