在悬停不同元素时滑动动态文本

<div id="element1" class="hover-element">Element 1</div>
<div id="element2" class="hover-element">Element 2</div>
<div id="element3" class="hover-element">Element 3</div>
<div id="dynamic-text">Dynamic Text</div>

.hover-element {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  color: #fff;
  text-align: center;
  line-height: 50px;
  margin-bottom: 10px;
  cursor: pointer;
}

#dynamic-text {
  width: 200px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

var element1 = document.getElementById('element1');
var element2 = document.getElementById('element2');
var element3 = document.getElementById('element3');
var dynamicText = document.getElementById('dynamic-text');

element1.addEventListener('mouseover', function() {
  dynamicText.textContent = 'Text for Element 1';
});

element2.addEventListener('mouseover', function() {
  dynamicText.textContent = 'Text for Element 2';
});

element3.addEventListener('mouseover', function() {
  dynamicText.textContent = 'Text for Element 3';
});