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

Question

我有一个网站，当我将鼠标悬停在菜单上时，我试图将整个叠加div整个身体部分。

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

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

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

这是我的示例html代码。其中标题部分包含menu，submeu等.Body部分包含其他部分。

 .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);
}

＆＃13;

＆＃13;

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);
}

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用之后或之前在特定div上进行叠加

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

Answer 3

你可以使用

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