悬停时文本显示不居中

Question

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

Answer 1

不透明度只会影响元素的可见性，而不是其定位。需要显示：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>

悬停时文本显示不居中

Text appears non-centered on hover

html

css

hover