触摸板滚动时更新光标图标 技术实现问询

这个效果完全可以用纯CSS实现，根本不需要JavaScript——浏览器本身就自带这种原生能力，只是很多人没注意到而已。

核心原理 #

浏览器在滚动过程中会持续跟踪鼠标指针下方的元素，只要元素的pointer-events属性不是none（默认就是auto，允许交互），就会自动应用该元素设置的cursor样式，不需要额外监听滚动或鼠标事件。

具体实现步骤 #

1. 先给页面设置基础光标样式：

   body {
     cursor: default; /* 默认箭头光标 */
   }
   

2. 给需要特殊光标的元素单独设置cursor属性，比如链接、按钮或者自定义交互元素：

   /* 链接用手型光标 */
   a {
     cursor: pointer;
   }
   
   /* 自定义光标示例 */
   .hover-target {
     cursor: url('your-custom-cursor.png'), pointer;
     /* 保持pointer-events默认值auto，确保浏览器能检测到悬停 */
     pointer-events: auto;
   }
   

注意事项 #

• 别给目标元素加pointer-events: none，否则浏览器会忽略它的光标设置
• 自定义光标要加 fallback 值（比如上面的pointer），避免在不支持自定义光标的环境下失效
• 如果页面有多层元素，确保目标元素的层级（z-index）足够高，让浏览器能识别它在鼠标下方

内容的提问来源于stack exchange，提问作者xmigas