我想在另一个div中执行特定的鼠标悬停效果

<div id="trigger">鼠标悬停触发区域</div>
<div id="effect">特定效果区域</div>

#trigger {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

#effect {
  width: 200px;
  height: 200px;
  background-color: #f00;
  display: none; /* 初始隐藏特定效果区域 */
}

var trigger = document.getElementById("trigger");
var effect = document.getElementById("effect");

trigger.addEventListener("mouseover", function() {
  effect.style.display = "block";
});

trigger.addEventListener("mouseout", function() {
  effect.style.display = "none";
});