当一个div悬停时更改另一个div的文本颜色

<div id="hoverDiv">悬停触发的div</div>
<div id="textDiv">要改变颜色的div</div>

var hoverDiv = document.getElementById("hoverDiv");
var textDiv = document.getElementById("textDiv");

hoverDiv.addEventListener("mouseover", function() {
  textDiv.style.color = "red";
});

hoverDiv.addEventListener("mouseout", function() {
  textDiv.style.color = "black";
});

#hoverDiv {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

#textDiv {
  padding: 10px;
  transition: color 0.3s;
}