我有一个网站,当我将鼠标悬停在菜单上时,我试图在其中制作一个覆盖整个 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 属性,但它不能正常工作,因为我的菜单是粘性标题
最佳答案
尝试为您的粘性标题提供固定位置。
示例:
<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>
关于jquery - 在不影响top div的情况下创建overlay div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46251309/