如何实现太阳系页面星球hover显示悬浮菜单，:hover触发失效怎么解决

架构老林

2026-9-23

问题根因

所有行星轨道div统一设置了z-index:9，尺寸更大的外层轨道（比如冥王星的780px宽容器）会堆叠在内层小轨道之上，鼠标事件被外层透明容器拦截，内层元素无法接收hover触发。
行星实体是用::before伪元素绘制，轨道容器本身大部分区域为透明，但默认会响应鼠标事件，导致hover触发逻辑异常。

修复方案

调整轨道层级，内层轨道z-index高于外层，避免外层容器拦截内层事件，在原有CSS中添加如下代码：

.space .sun { z-index: 12; }
.space .mercury { z-index: 11; }
.space .venus { z-index: 10; }
.space .earth { z-index: 9; }
.space .mars { z-index: 8; }
.space .asteroids-belt { z-index: 7; }
.space .jupiter { z-index: 6; }
.space .saturn { z-index: 5; }
.space .uranus { z-index: 4; }
.space .neptune { z-index: 3; }
.space .pluto { z-index: 2; }

禁用透明轨道区域的鼠标事件，仅保留行星实体和太阳的事件响应能力，修改原有.space .solar-syst div规则，新增对应配置：

.space .solar-syst div {
    border-radius: 1000px;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 9;
    /* 新增下面这行 */
    pointer-events: none;
}
/* 新增如下规则，开启行星和太阳的鼠标事件 */
.space .sun,
.space .solar-syst div:not(.sun):not(.asteroids-belt)::before {
    pointer-events: auto;
}

完成上述配置后即可正常编写hover交互逻辑，示例如下：

/*  hover地球时高亮行星  */
.space .earth:hover::before {
    transform: scale(1.2);
    box-shadow: 0 0 10px #11abe9;
    transition: all 0.2s ease;
    cursor: pointer;
}
/* hover时展示对应悬浮菜单，假设你的菜单类为.earth-menu */
.earth-menu {
    display: none;
    position: fixed;
    z-index: 999;
    /* 补充你Figma设计的菜单样式 */
}
.space .earth:hover ~ .earth-menu {
    display: block;
}