這是我做的當前代碼，旋轉和影片都還可以，但是我無法在行星的影像或行星的軌道上制作懸停文本。
<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 ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</body>
</html>
如何在影像上添加懸停效果以便顯示行星名稱？我不知道如何添加它。
uj5u.com熱心網友回復：
這個問題可能源于行星上重疊的軌道。嘗試將 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/docs/Web/CSS/z-index
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451024.html
上一篇：對陣列長度更改應用影片