Jquery 创建覆盖div而不影响顶部div

我有一个网站，我试图使覆盖div整个身体部分时，我悬停的菜单

<header><menu><ul><li class="new-menu">menu1</li></menu></header>

 <div id="myNav" class="overlay"></div>

 <section id="content"></section>

在这里，当我将鼠标悬停在“新建”菜单上时，我会为其编写代码，以使覆盖宽度达到100%。所以，整个网站得到黑色覆盖

但我只想给覆盖部分的内容部分。我怎样才能做到这一点

---

即使我正在使用css top属性，但它也不能很好地工作，因为我的菜单是粘性标题

您可以在之后或之前使用它在特定div上创建覆盖

#content{position:relative}
 #content:After{position:absolute;top:0;right:0;bottom:0;top:0;background:#000;content: '';}

---

试着给你的粘头位置固定

例如：

标题{ z指数：5； 位置：固定； 宽度：100%； 排名：0； 背景：白色； } .覆盖{ 身高：100%； 宽度：100%； 位置：固定； z指数：1； 排名：0； 背景色：rgb0,0,0； 背景色：rgba0,0,0,0.58； } 菜单1 你可以用

header:hover + #myNav {
 width: 100%;
}

---

我建议在代码中添加一个解释。这已被标记为低质量。

<header><menu><ul><li class="new-menu">menu1</li></menu></header>

<div id="myNav" class="overlay"></div>

<section id="content"></section>

header{
  z-index: 5;
  position: fixed;
  width: 100%;
  top: 0;
  background: white;
}
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.58);
}

header:hover + #myNav {
 width: 100%;
}