为什么只有其余元素无法点击，我的其中一个元素才可以点击？

Question

Only one of my planets is clickable in my animation, my intention with the program is for all of the planets to be clickable, and when clicked, take you to the corresponding page. The planet that is clickable is Venus which is the outermost planet currently. Does anyone know why this problem is occurring?

 #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

Try adding different z-indexs to the orbits to create a layering affect... highest z-index for the inner orbit and then lower as you go out. I started with a z-index of 50 on earth and then down to 20 with venus.

You can now click on each one individually.

 #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>