CSS Animations叠加元素悬停轨道动画：仅上层元素动的问题

嘿，我懂你碰到的这个坑！这种多个叠加元素悬停动画失效的情况，大概率是上层元素把鼠标事件给拦截了——哪怕你调整了z-index，只要上层元素在视觉上覆盖了下层，鼠标就没法直接触发下层元素的:hover状态，自然也就不会播放动画了。

给你几个实用的解决方案，按需选择：

方案1：父容器统一触发所有动画（最推荐） #

把所有轨道div和主行星元素放在同一个父容器里，只给父容器添加:hover状态，触发所有子轨道的动画。这样不管鼠标悬停在哪个元素上，父容器的hover状态都会激活，所有轨道一起动。

示例代码 #

<div class="planet-container">
  <div class="planet">🌍</div>
  <div class="orbit orbit-1"></div>
  <div class="orbit orbit-2"></div>
  <div class="orbit orbit-3"></div>
</div>

.planet-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 可选，提示用户可交互 */
}

.planet {
  font-size: 60px;
  z-index: 10; /* 让行星在最上层 */
}

.orbit {
  position: absolute;
  border: 2px dashed #66ccff;
  border-radius: 50%;
  animation: none;
}

/* 不同尺寸的轨道 */
.orbit-1 { width: 100px; height: 100px; }
.orbit-2 { width: 160px; height: 160px; }
.orbit-3 { width: 220px; height: 220px; }

/* 父容器hover时，所有轨道启动动画 */
.planet-container:hover .orbit {
  animation: orbit-spin 8s linear infinite;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

方案2：单独触发单个轨道（按需使用） #

如果需要每个轨道hover时单独动，其他不动，可以给上层轨道设置pointer-events: none，让鼠标事件穿透到下层元素，但这样上层轨道自己的hover也会失效。或者给每个轨道设置不重叠的点击区域——比如给上层轨道加透明的内边距，让下层轨道的边缘能被鼠标碰到，但这种体验比较鸡肋，不推荐。

额外检查点 #

• 确认每个轨道都正确添加了动画属性，比如animation和对应的@keyframes定义
• 检查轨道的position是否设置为absolute，确保它们是叠加布局

这个父容器触发的方法应该能完美解决你的问题，试试吧！

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