当我将鼠标悬停在X上时，如何在单个列表中仅显示X？

<ul>
  <li id="item1">A</li>
  <li id="item2">B</li>
  <li id="item3">C</li>
  <li id="item4">X</li>
  <li id="item5">D</li>
</ul>

// 获取列表项元素
var itemX = document.getElementById("item4");

// 监听鼠标悬停事件
itemX.addEventListener("mouseover", function() {
  // 鼠标悬停时显示X所在的列表项
  itemX.style.display = "block";
});

itemX.addEventListener("mouseout", function() {
  // 鼠标移出时隐藏X所在的列表项
  itemX.style.display = "none";
});

#item4 {
  display: none; /* 初始隐藏X所在的列表项 */
  /* 其他样式设置 */
}