10.1 cursor 屬性
CSS 為我們提供了使用 cursor 屬性在元素上使用不同風格的游標。這個屬性允許你指定各種類型的游標，提升網站的互動性和視覺吸引力。
cursor 屬性定義了當鼠標在元素上時游標的外觀。值可以是預設的或是自定義的圖片。
語法：
element {
cursor: value;
}
值：
cursor 屬性支持許多值，可以分為預設的和自定義的。
預設值：
default: 預設游標pointer: 手形游標，通常用於連結text: 文本游標（I 型），通常用於文本框move: 移動游標wait: 沙漏或等待游標help: 問號游標crosshair: 十字準星游標not-allowed: 禁止標誌游標（斜線圓形）grab和grabbing: 拖動元素時的游標
預設值的使用範例：
CSS
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="default-cursor">預設游標</div>
<div class="pointer-cursor">手形游標</div>
<div class="text-cursor">文本游標</div>
10.2 自定義值（自定義游標）
cursor 屬性也支持用自定義的圖片作為游標。為此使用 url 值。
語法：
element {
cursor: url("custom-cursor.png"), fallback;
}
其中：
url('custom-cursor.png'): 指定游標圖片的路徑fallback: 預設的值，如果無法載入自定義圖片則使用此值
自定義游標的使用範例：
CSS
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor">自定義游標</div>
</body>
自定義游標的規範與限制：
- 圖片格式：支持
.cur,.png,.jpg,.gif格式。 - 圖片尺寸：建議使用 32x32 像素或更小的圖片，以獲得更好的性能和兼容性。
- 點擊坐標：可以在游標圖片中設置點擊坐標（熱點）。預設為左上角 (0,0)。
10.3 使用自定義游標的細節
圖片格式
自定義游標可以是不同的格式，如 PNG, GIF, JPG 和 SVG。建議使用支持透明的格式（如 PNG），確保游標在任何背景都可以正常顯示。
圖片尺寸
游標圖片不應該太大。推薦尺寸為 32x32 像素或更小。大的圖片在某些瀏覽器中可能無法正確顯示。
設置焦點坐標
可以通過在圖片 URL 之後附加的值來指定游標的焦點坐標（熱點）。
語法
element {
cursor: url("custom-cursor.png") x y, fallback;
}
其中：
x和y: 圖片左上角的焦點坐標。
具有焦點坐標的使用範例：
CSS
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor-focus">具有焦點的自定義游標</div>
</body>
程式碼說明：
.custom-cursor-focus: 設定自定義游標及其焦點坐標 (16, 16)，使圖片中心成為熱點
實際應用：
- 提升 UI/UX: 使用自定義游標能顯著提升用戶界面，使其更加直觀且美觀。
- 互動元素: 自定義游標可用於互動元素，如按鈕、連結和圖示等。
- 遊戲和應用程式: 在遊戲和網頁應用程式中，自定義游標有助於創造獨特的風格和氛圍。
GO TO FULL VERSION