創建覆蓋DIV wthout影響頂格

Question

我有一個網站，我想提出一個覆蓋整個DIV的身體部位時，我將鼠標懸停在菜單。

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

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

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

這是我的示例html代碼。其中標題部分包含菜單，submeu等。體部分包含其他部分。

.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%。這樣整個網站就會覆蓋黑色。

但我只希望給覆蓋到部分（＃內容）的一部分。我怎麼能做到這一點？

即使我使用的CSS top屬性，但因爲我的菜單是粘頭

它沒有很好地工作

Answer 1

之後或之前，您可以使用，使覆蓋在特定的div

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

Answer 2

儘量給位置固定爲你的粘頭。

例子：

<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>

Answer 3

可以使用

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