在兒童懸停時，爲容器添加背景顏色

Question

當光標懸停在左側div時，我需要將整個包裝（除了左側div）與黑色（不透明度爲0.2）重疊。

我該怎麼做，在CSS？謝謝。

<div id="wrapper"> 
 
    <div id="left">... some elements</div> 
 
    <div id="right">... some elements</div> 
 
</div>

Answer 1

您可以使用一般的兄弟組合子（〜）和絕對位置獲得這種效果的股利。在那個例子中，你會選擇帶有「.bgr」類的div，它是在懸掛的孩子之後出現，並使其變成粉紅色/藍色。

#wraper { 
 
position:relative; 
 
width:200px; 
 
height:200px; 
 
} 
 
.bgr { 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
width:100%; 
 
height:100%; 
 
background:#fff; 
 
padding:30px; 
 
} 
 
#left, #right { 
 
position:relative; 
 
z-index:1; 
 
width:200px; 
 
height:100px; 
 
border:1px solid #333; 
 
margin:20px; 
 
} 
 
#left{ 
 
background:#fff; 
 
} 
 
#right{ 
 
background:#f1f1f1; 
 
} 
 
#left:hover { 
 
background:#f9f9f9; 
 
} 
 
#right:hover { 
 
background:#f9f9f9; 
 
} 
 
#left:hover ~ .bgr { 
 
background:blue; 
 
} 
 
#right:hover ~ .bgr { 
 
background:pink; 
 
}

<div id="wrapper"> 
 
<div id="left"> ... some elements </div> 
 
<div id="right"> ... some elements </div> 
 
<div class="bgr"></div> 
 
</div>

Answer 2

你可以做到這一點通過施加非常大的box-shadow這是黑色的，並且具有0.2的不透明度通過使用rgba()顏色。

容器（#wrapper）必須有overflow: hidden來隱藏多餘的陰影。

#wrapper { 
 
    border:1px solid red; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 

 
#wrapper > div { 
 
    border: 1px solid blue; 
 
} 
 

 
#left:hover { 
 
    box-shadow: 0 0 10em 10em rgba(0,0,0,0.2); 
 
}

<div id="wrapper"> 
 
    <div id="left"> ... some elements </div> 
 
    <div id="right"> ... some elements </div> 
 
</div>

的jsfiddle：https://jsfiddle.net/azizn/sfq252g5/