为什么我的其中一个元素只有其他元素无法点击？

Question

在我的动画中，只有我的一颗行星是可单击的，该程序的目的是使所有行星都可单击，并在单击时将您带到相应页面。可点击的行星是金星，它是当前最外面的行星。有谁知道为什么会出现此问题？

#earthOrbit {
  border: dashed 3px lightskyblue;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -125px;
  margin-left: -125px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  animation: spin 45s linear infinite;
}

#earth {
  position: absolute;
  top: 50%;
  left: -10%;
  margin-top: -40px;
  animation: spin 40s linear infinite;
}

#marsOrbit {
  border: dashed 3px lightcoral;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -175px;
  margin-left: -175px;
  height: 300px;
  width: 300px;
  border-radius: 100%;
  animation: spin 50s linear infinite;
}

#mars {
  position: absolute;
  top: 50%;
  left: -6%;
  margin-top: -40px;
  animation: spin 50s linear infinite;
}

#jupiterOrbit {
  border: dashed 3px beige;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -225px;
  margin-left: -225px;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  animation: spin 55s linear infinite;
}

#jupiter {
  position: absolute;
  top: 50%;
  left: -4.5%;
  margin-top: -40px;
  animation: spin 20s linear infinite;
}

#venusOrbit {
  border: dashed 3px sandybrown;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -275px;
  margin-left: -275px;
  height: 500px;
  width: 500px;
  border-radius: 100%;
  animation: spin 60s linear infinite;
}

#venus {
  position: absolute;
  top: 50%;
  left: -4.5%;
  margin-top: -40px;
  animation: spin 20s linear infinite;
}

img {
  height: 45px;
  width: 45px;
}

<div id="sun"></div>

<div id="earthOrbit">
  <a href="earth.html"><img src="earth.png" alt="earth" id="earth"></a>
</div>

<div id="jupiterOrbit">
  <a href="jupiter.html"><img src="jupiter.png" alt="jupiter" id="jupiter"></a>
</div>

<div id="marsOrbit">
  <a href="mars.html"><img src="mars.png" alt="mars" id="mars"></a>
</div>

<div id="venusOrbit">
  <a href="venus.html"><img src="venus.png" alt="venus" id="venus"></a>
</div>

Answer 1

尝试向轨道添加不同的z索引以创建分层效果...内部轨道的z索引最高，出门时降低。我从地球上的z索引开始为50，然后在金星下降至20。

您现在可以分别单击每个。

#earthOrbit {
  border: dashed 3px lightskyblue;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -125px;
  margin-left: -125px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  animation: spin 45s linear infinite;
  z-index: 50;
}

#earth {
  position: absolute;
  top: 50%;
  left: -10%;
  margin-top: -40px;
  animation: spin 40s linear infinite;
}

#marsOrbit {
  border: dashed 3px lightcoral;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -175px;
  margin-left: -175px;
  height: 300px;
  width: 300px;
  border-radius: 100%;
  animation: spin 50s linear infinite;
  z-index: 40;
}

#mars {
  position: absolute;
  top: 50%;
  left: -6%;
  margin-top: -40px;
  animation: spin 50s linear infinite;
}

#jupiterOrbit {
  border: dashed 3px beige;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -225px;
  margin-left: -225px;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  animation: spin 55s linear infinite;
  z-index: 30;
}

#jupiter {
  position: absolute;
  top: 50%;
  left: -4.5%;
  margin-top: -40px;
  animation: spin 20s linear infinite;
}

#venusOrbit {
  border: dashed 3px sandybrown;
  position: absolute;
  top: 50%;
  left: 75%;
  margin-top: -275px;
  margin-left: -275px;
  height: 500px;
  width: 500px;
  border-radius: 100%;
  animation: spin 60s linear infinite;
  z-index: 20;
}

#venus {
  position: absolute;
  top: 50%;
  left: -4.5%;
  margin-top: -40px;
  animation: spin 20s linear infinite;
}

img {
  height: 45px;
  width: 45px;
}

<div id="sun"></div>

<div id="earthOrbit">
  <a href="earth.html"><img src="earth.png" alt="earth" id="earth"></a>
</div>

<div id="jupiterOrbit">
  <a href="jupiter.html"><img src="jupiter.png" alt="jupiter" id="jupiter"></a>
</div>

<div id="marsOrbit">
  <a href="mars.html"><img src="mars.png" alt="mars" id="mars"></a>
</div>

<div id="venusOrbit">
  <a href="venus.html"><img src="venus.png" alt="venus" id="venus"></a>
</div>