how can I add hover here?-CodePudding

This is the current code I made, the rotations and animations are okay, but I can't make a hover text in the image of the planet or the orbit of the planet.

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

I can't make a hover with this while the planets were animating.

        .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 ></div>  
        <div ></div> 
        <div ></div>  
        <div ></div>  
        <div ></div>  
        <div ></div>  
        <div ></div>  
    </div>  
</body>  
</html>

How can I add hover effect on the image so that the name of the planet will show? I don't know how to add it.

CodePudding user response：

This issue may stem from the orbits overlapping on your planets. Try adding z-index : 1 for example to one of your planet class and test the hovering again. Here is an example:

  .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;
  }

For more informations on z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index