悬停菜单项 CSS 时隐藏容器

Question

我的网站：https://nycphoto.pixl.work/delete/

当 Photo Booth 菜单悬停时，我想在标题下隐藏一个容器。你可以在这里查看：

Photo Booth 菜单项的 ID：#menu-item-7912 Header下的容器ID：#mega-menu-customized

到目前为止，我已经尝试了以下方法：

.menu-item.menu-item-7912:hover + #mega-menu-customized{
font-size: 90px !important;
background-color: blue !important;
display: none !important;
}

这不起作用。

是否可以使用 CSS 来隐藏 Mega 菜单容器？

Answer 1

检查这个例子。

我在 div1 悬停时切换 div2 上的 hide 类。

let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');

div1.addEventListener('mouseover', () => {
  div2.classList.add("hide");
});

div1.addEventListener('mouseleave', () => {
  div2.classList.remove("hide");
});

div {
  height: 100px;
  width: 100px;
  border: 1px dashed red;
  margin: 10px;
}

#div1 {
  background: #66000040;
}

#div2 {
  background: #00660040;
}

.hide {
  display: none;
}

<section>
<div id='div1'>div 1</div>
<div id='div2'>div 2</div>
</section>