css - 悬停菜单项 CSS 时隐藏容器

Question

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

我在 Header 下有一个容器，当 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 菜单容器来隐藏它？

标签： css

Answer 1

检查这个例子。

我在hidediv1 悬停时切换 div2 上的课程。

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>