自定义光标实现后元素hover效果失效的问题求助

嘿，我来帮你排查这个问题！

问题根源 #

你的自定义光标之所以会挡住hover效果，是因为它的z-index: 9999太高了，而且fixed定位让它直接覆盖在所有页面元素的最上层。浏览器的鼠标事件是被最上层的元素接收的，所以你的光标元素把所有hover、点击事件都拦截了，下方的元素根本拿不到事件——只有快速移动光标时，浏览器的事件处理偶尔“跟不上”，才会让下方元素侥幸触发hover。

至于改成relative后滚动偏移的问题，是因为relative定位是基于元素在文档流里的初始位置，而你用clientX/clientY是视口坐标，页面滚动时文档流和视口的位置差变大，光标自然就跑偏了。

完美解决方案 #

只需要给你的自定义光标加一个CSS属性，让它不拦截鼠标事件就行：

修改后的#cursor CSS代码：

#cursor {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #95c11e;
  position: fixed;
  z-index: 9999;
  pointer-events: none; /* 关键属性：让光标不接收鼠标事件 */
}

pointer-events: none会让这个光标元素变成“透明”的鼠标事件目标，鼠标会直接穿透它，触发下方元素的hover效果，同时fixed定位保证光标始终跟着视口的鼠标位置，滚动也不会偏移，刚好解决你的两个问题~

备注：内容来源于stack exchange，提问作者saribcantcode