如何在悬停状态下显示隐藏的侧边栏

<div class="container">
  <div class="sidebar" id="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  <div class="main-content">
    <!-- 主内容区域 -->
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  display: none; /* 初始状态隐藏 */
}

.main-content {
  flex-grow: 1;
  /* 其他样式设置 */
}

var sidebar = document.getElementById("sidebar");
var container = document.querySelector(".container");

container.addEventListener("mouseover", function() {
  sidebar.style.display = "block";
});

container.addEventListener("mouseout", function() {
  sidebar.style.display = "none";
});