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

发布于 2025-01-17 02:48:33 字数 3915 浏览 2 评论 0原文

这是我当前编写的代码，旋转和动画都可以，但我无法在行星图像或行星轨道上制作悬停文本。

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

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

原文

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

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自由如风 2025-01-24 02:48:33

这个问题可能源于你们行星上的轨道重叠。例如，尝试将 z-index : 1 添加到您的行星类别之一，然后再次测试悬停。
这是一个示例：

  .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/文档/Web/CSS/z-index

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

回复收藏 0 原文

~没有更多了~