当我将鼠标悬停在另一个div上时，如何使文本出现在另一个div中？

const targetDiv = document.getElementById('targetDiv'); // 获取目标div元素

targetDiv.addEventListener('mouseover', function() {
  // 在鼠标悬停时执行的操作
  const textDiv = document.getElementById('textDiv'); // 获取文本div元素
  textDiv.style.display = 'block'; // 设置文本div显示
});

targetDiv.addEventListener('mouseout', function() {
  // 在鼠标移出时执行的操作
  const textDiv = document.getElementById('textDiv'); // 获取文本div元素
  textDiv.style.display = 'none'; // 设置文本div隐藏
});

<div id="targetDiv" style="width: 200px; height: 200px; background-color: #ccc;">
  鼠标悬停在此div上
</div>

<div id="textDiv" style="display: none; width: 200px; height: 200px; background-color: #f00;">
  文本内容
</div>