此篇文章瀏覽量:
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
這樣就可以很方便的查閱了。
如有任何問題,歡迎下方留言喔!