如何保持悬停区域的背景颜色/不透明度，同时使html页面的其余部分变暗？

.hover-area:hover {
  background-color: #f00;
  opacity: 0.8;
}

function darkenPage() {
  var body = document.getElementsByTagName("body")[0];
  body.style.backgroundColor = "rgba(0, 0, 0, 0.6)"; // 设置页面背景颜色为半透明黑色
}

function lightenPage() {
  var body = document.getElementsByTagName("body")[0];
  body.style.backgroundColor = ""; // 恢复页面默认背景颜色
}

document.addEventListener("DOMContentLoaded", function() {
  var hoverArea = document.getElementsByClassName("hover-area")[0];

  hoverArea.addEventListener("mouseover", darkenPage); // 鼠标悬停时调用darkenPage函数
  hoverArea.addEventListener("mouseout", lightenPage); // 鼠标离开时调用lightenPage函数
});