悬停时文本不居中

问题描述

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

hover html