光标的下一个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：一个大发光的球显示悬停信息。

切记确定可访问性。谨慎地使用自定义光标。