[CSS] 滑鼠游標(Cursor)種類有哪些呢?

前言

為了方便看目前有哪些游標可以使用,所以這裡列出了目前可以使用的游標,在 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(http://notes.carlos-studio.com/images/1.png), default !important;
}
  • grab
  • grabbing
  • another

這樣就可以很方便的查閱了。

如有任何問題,歡迎下方留言喔!

您可在此處留言

搶先留言!

avatar
  Subscribe  
Notify of