[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(https://notes.carlos-studio.com/images/1.png), default !important;
}

• grab
• grabbing
• another

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

如有任何問題，歡迎下方留言喔！