光標的下一個CSS樣式

網站光標樣式經常被忽略，但為增強用戶體驗提供了巨大的潛力。儘管保持一致性對於避免用戶混亂至關重要，但通過仔細的計劃可以實現複雜的光標自定義。請記住，自定義光標在觸摸界面上不可見，從而限制了它們的覆蓋範圍。

傑夫（Geoff）的文章“使用CSS更改光標以獲得更好的用戶體驗（或樂趣）”，為穩固的基礎提供了堅實的基礎。本文探討了更高級的技術。

JavaScript驅動的自定義光標

僅CSS就提供有限的光標樣式選項。 JavaScript解鎖了新的自定義級別。通過使用JavaScript控制的元素作為光標，您可以動態樣式，包括過渡，嵌入式文本，複雜的動畫和過濾器。

最簡單的方法涉及<div>這使用<code>mousemove事件偵聽器反映鼠標位置。 mousedown偵聽器可以添加互動效果。

此基本示例會創建一個可單擊的光標，該光標在單擊時縮放。光標的位置由鼠標相對於頁面坐標確定。但是，默認的光標仍然可見。要完全替換它，請添加cursor: none;到您的CSS樣式表（應用於* ）。請注意，如果文檔高度未完全填充，則某些瀏覽器可能仍會顯示默認光標。

為了防止自定義光標干擾交互，請應用pointer-events: none;到光標元素。添加一個類（例如，“可擠壓”）允許對特定元素進行自定義懸停效果。

這會創建一個視覺上吸引人的圓形光標。

可訪問性，後備和触摸屏

對於觸摸屏用戶，自定義光標是不必要的，可以禁用。同樣，具有prefers-reduced-motion偏好的用戶可能更喜歡更簡單的光標。這可以通過JavaScript實現：

窗口中的const istouchdevice =“ ontouchstart” || navigator.maxtouchpoints> 0;
const prefersedmotion = window.matchmedia（“（優先降低的動作：降低）”）。匹配；

if（！istouchdevice &&！prefersreduccesmotion && cursor）{
  //光標實施此處
}

這樣可以確保僅在啟用JavaScript並且用戶不使用觸摸屏或更喜歡減少運動時才會出現自定義光標。如果沒有JavaScript，則使用瀏覽器的默認光標。

為了獲得更順暢的後備體驗，請考慮類似於自定義的CSS定義的後備光標：

 html {
  光標：URL（“數據：Image/SVG） XML; base64，phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmcvmjawmc9zdmciihdpzhropsizmiigagagagagvpz2h0psizmi igdmlld0jved0imcawidmyij4kica8y2lyy2xlign4psixniigy3k9ije2iibypsixniigzmlsbd0iymxhy2siic8 cjwvc3znpg ==“）16 16，auto;
}

這使用一個簡單的32x32 base64編碼圓，其中16 16值以光標熱點為中心。

高級定制

可能性很大。考慮添加過濾器以進行視覺效果，複雜的動畫或從其實際位置抵消光標。

這裡有一些鼓舞人心的例子：

• Studio Mesmer：使用自定義眼圖。
• IARA GRINSPUN的投資組合：具有浮動的，稍微延遲的圓形光標。
• MarlèneBruhat的投資組合：將光滑的光標與梯度背景效果結合在一起。
• Aleksandr Yaremenko的投資組合：一個簡單而醒目的光標。
• Terra：一個大發光的球顯示懸停信息。

切記確定可訪問性。謹慎地使用自定義光標。