css 滑鼠游標設定

54墨玉發表於2024-06-27

在CSS中,關於滑鼠游標的設定主要透過cursor屬性來實現。
以下是一些常見的滑鼠游標設定及其描述:

  1. 預設游標
  • 關鍵字:default
  • 描述:通常是箭頭形狀,是客戶端平臺的預設游標樣式。
  1. 自動游標
  • 關鍵字:auto
  • 描述:瀏覽器根據當前情況自動確定滑鼠游標型別。
  1. 手形游標
  • 關鍵字:pointerhand
  • 描述:豎起一隻手指的手形游標,通常用於指示超連結或可點選元素。
  1. 十字線游標
  • 關鍵字:crosshair
  • 描述:簡單的十字線游標,用於標示選擇或測量區域。
  1. 文字編輯游標
  • 關鍵字:text
  • 描述:用於標示可編輯的水平文字的游標,通常是大寫字母I的形狀。
  1. 移動游標
  • 關鍵字:move
  • 描述:十字箭頭游標,用於標示物件可被移動。
  1. 等待/忙碌游標
  • 關鍵字:wait
  • 描述:用於標示程式忙、使用者需要等待的游標,通常是沙漏或手錶的形狀。
  1. 幫助資訊游標
  • 關鍵字:help
  • 描述:帶有問號標記的箭頭,用於標示有幫助資訊存在。
  1. 禁止游標
  • 關鍵字:not-allowed
  • 描述:禁止標記(一個被斜線貫穿的圓圈)游標,用於標示請求的操作不允許被執行。
  1. 自定義游標
  • 關鍵字:url(url)
  • 描述:可以透過url()函式使用絕對或相對URL地址指定自定義游標檔案(字尾為.cur或.ani)。
    此外,還有一些與調整矩形框邊緣相關的值,如:
  • e-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resize,這些值分別表示矩形框的邊緣可以向特定方向移動的游標。
    偽類選擇器與滑鼠游標
  • :hover:用於選取滑鼠懸停在元素上時的樣式。
  • :active:用於選取滑鼠點選元素時的樣式。
  • :focus:用於選取具有焦點的元素。 這些偽類選擇器可以與cursor屬性結合使用,以在滑鼠懸停、點選或元素具有焦點時改變游標的樣式。

相關文章