自定义光标悬停地球图片时恢复默认样式的解决求助

问题根源有两个：一是固定定位的地球容器层级不够，被下方的季节区块覆盖，导致鼠标无法触发地球元素的光标设置；二是你之前用cursor:none会直接隐藏光标，并非恢复默认样式。

只需修改两处CSS即可解决：

.wrapper {
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  z-index: 10; /* 提升地球容器层级，确保在季节区块上方 */
}

#earth {
  width: 800px;
  height: 800px;
  cursor: default; /* 设置为默认光标样式，替代之前的none */
}

原理说明 #

1. z-index:10：固定定位元素默认层级虽高于普通流元素，但季节区块为100vh高度，滚动时会占满视口，容易覆盖地球容器。添加足够高的z-index可确保地球容器始终处于交互层级最上层，鼠标悬停时优先识别地球元素。
2. cursor:default：该属性会将光标恢复为浏览器默认的箭头样式，正好满足恢复默认光标的需求，避免了cursor:none直接隐藏光标的问题。

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