微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

悬停时文本不居中

如何解决悬停时文本不居中

我试图让我的网站的“关于”部分在悬停时以不同的语言显示。将鼠标悬停在其上时使翻译显示代码有效,但是它使翻译后的文本显示在原始文本下方(而不是在同一位置)有人可以帮我解决这个问题吗?干杯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 举报,一经查实,本站将立刻删除。