如何解决悬停时文本不居中
我试图让我的网站的“关于”部分在悬停时以不同的语言显示。将鼠标悬停在其上时使翻译显示的代码有效,但是它使翻译后的文本显示在原始文本下方(而不是在同一位置)有人可以帮我解决这个问题吗?干杯xx
这是代码:
.aboutger {
opacity: 0;
}
.textabout {
text-align: center;
font-size: 25px;
position: relative;
top: 140px;
width: 1500px;
font-family: "Druk Wide Web Medium Regular";
color: floralwhite;
-webkit-text-stroke: 1px black;
}
.abouteng,.aboutger {
transition: opacity 1s;
}
.textabout:hover .abouteng {
opacity: 0;
}
.textabout:hover .aboutger {
opacity: 1;
}
<div class="textabout">
<p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists.
<br> <br> Being classically trained since his early childhood,he started writing and producing electronic pop music at the age of 11,later transitioning into techno in 2017.</span></p>
<p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene.
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte,begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen,bis er 2017 zu Techno ueberging. </span></p>
</div>
解决方法
不透明度仅适用于元素的可见性,而不适用于其定位。要使文本出现在相同的位置,需要使用 display: none 或绝对定位。
.aboutger {
display: none;
}
.textabout {
text-align: center;
font-size: 25px;
position: relative;
top: 140px;
width: 1500px;
font-family: "Druk Wide Web Medium Regular";
color: floralwhite;
-webkit-text-stroke: 1px black;
}
.abouteng,.aboutger {
transition: opacity 1s;
}
.textabout:hover .abouteng {
display: none;
transition: opacity 2s;
}
.textabout:hover .aboutger {
display: block;
transition: opacity 2s;
}
<div class="textabout">
<p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists.
<br> <br> Being classically trained since his early childhood,he started writing and producing electronic pop music at the age of 11,later transitioning into techno in 2017.</span></p>
<p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene.
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte,begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen,bis er 2017 zu Techno ueberging. </span></p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。