悬停下拉菜单时，如何使用半透明覆盖使内容变暗？

<div class="container">
  <!-- 其他内容 -->
  <div class="overlay"></div>
  <div class="dropdown-menu">
    <!-- 下拉菜单内容 -->
  </div>
</div>

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 999; /* 确保覆盖层在其他内容之上 */
  display: none; /* 初始状态下隐藏 */
}

.container:hover .overlay {
  display: block; /* 鼠标悬停时显示覆盖层 */
}

// 使用 JavaScript
const container = document.querySelector('.container');
const overlay = document.querySelector('.overlay');

container.addEventListener('mouseenter', () => {
  overlay.style.display = 'block';
});

container.addEventListener('mouseleave', () => {
  overlay.style.display = 'none';
});

/* 使用 CSS 动画 */
.container:hover .overlay {
  animation: fade-in 0.5s forwards;
}

.container .overlay {
  animation: fade-out 0.5s forwards;
  /* 其他样式设置 */
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}