jquery - 在不影响top div的情况下创建overlay div

Question

我有一个网站，当我将鼠标悬停在菜单上时，我试图在其中制作一个覆盖整个 body 部分的 div。

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

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

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

这是我的示例 html 代码。其中标题部分包含菜单、子菜单等。正文部分包含其他部分。

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

}

在这里，当我将鼠标悬停在新菜单上时，我编写代码使 width of overlay 100% 。使整个网站得到黑色覆盖。

但我只想覆盖部分 (#content) 部分。我怎样才能做到这一点？

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

Answer 1

尝试为您的粘性标题提供固定位置。

示例:

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

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

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

CSS:

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{
  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><menu><ul><li class="new-menu">menu1</li></menu></header>

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

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