我怎样才能在这里添加悬停？

Question

这是我目前做的代码，旋转和动画都可以，但是我不能在行星的图像或行星的轨道上做一个悬停文本。

<html>  
<head>  
    <style> 
    body {
        background-image: url(bg.jpg);
        background-size: cover;
        }

当行星正在动画时，我无法用它悬停。

        .sun {   
            left:700px;   
            top:300px;   
            height: 170px;   
            width: 170px;   
            background-image: url("sun.png");
            background-repeat: cover;
            background-size: 100%;  
            position: absolute;   
            margin: 0;   
        }   
  
the planet or the orbit of the planet when you hover it, it should show the text or the name of the planet itself.

        .mercury {   
            left:680px;   
            top:343px;   
            height: 40px;   
            width: 40px;   
            background-image: url("mercury.png");
            background-repeat: no-repeat;
            background-size: 100%;   
            position: absolute;   
            transform-origin: 280% 90%;   
            animation: rotate 1.5s infinite linear;   
        }   
  
        .mercuryOrbit {   
            left:690px;   
            top:285px;   
            height: 190px;   
            width: 190px;   
            background-color: transparent;   
            border-radius: 50%;   
            border-style: dashed;   
            border-color: gray;   
            position: absolute;   
            border-width: 1px;   
            margin: 0px;   
            padding: 0px;   
    
        }   
        

        .venus {   
            left:600px;   
            top:330px;   
            height: 50px;
            width: 50px;   
            background-image: url("venus.png");
            background-repeat: no-repeat;
            background-size: 100%;  
            position: absolute;   
            transform-origin: 370% 80%;   
            animation: rotate 3.84s infinite linear;   
        }   
  

        .venusOrbit {   
            left:620px;   
            top:210px;   
            height: 330px;   
            width: 330px;   
            background-color: transparent;   
            border-radius: 50%;   
            border-style: dashed;   
            border-color: gray;   
            position: absolute;   
            border-width: 1px;     
            margin: 0px;   
            padding: 0px;   
        }
        

        .earth {   
            left:535px;   
            top:300px;   
            height: 70px;
            width: 70px;   
            background-image: url("earth.png");
            background-repeat: no-repeat;
            background-size: 100%;  
            position: absolute;   
            transform-origin: 350% 100%;   
            animation: rotate 6.25s infinite linear;   
        }   
  

        .earthOrbit {   
            left:570px;   
            top:160px;    
            height: 430px;   
            width: 430px;   
            background-color: transparent;   
            border-radius: 50%;   
            border-style: dashed;   
            border-color: gray;   
            position: absolute;   
            border-width: 1px;   
            margin: 0px;   
            padding: 0px;   
        } 
        
    @keyframes rotate {   
            100% {   
                transform: rotate(-360deg);   
            }   
        }   
  
    </style>  
  
</head>  
<body>  
    <div class=“solarsys”>  
        <div class="sun"></div>  
        <div class="mercuryOrbit"></div> 
        <div class="mercury"></div>  
        <div class="venusOrbit"></div>  
        <div class="venus"></div>  
        <div class="earthOrbit"></div>  
        <div class="earth"></div>  
    </div>  
</body>  
</html>

如何在图像上添加悬停效果，以便显示行星的名称？不知道怎么加。

Answer 1

这个问题可能源于你们行星上的轨道重叠。尝试将 z-index : 1 添加到您的星球之一 class 并再次测试悬停。这是一个例子：

  .mercury {
    /* rest of your class here */
    position: relative;
    z-index: 1;
  }
  .mercury::after {
    content: "Hello world";
    position: absolute;
    font-size: 0.8rem;
    background-color: #3f3f3f;
    border-radius: 3px;
    padding: 0.2rem;
    bottom: 100%;
    left: 0;
    color: white;
    display: none;
  }
  .mercury:hover.mercury::after {
    display: block;
  }

有关z-index的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

我怎样才能在这里添加悬停？

how can I add hover here?

css

animation

hover