在儿童悬停时，为容器添加背景颜色

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/