When hovering over a child, add a background color to the container

Question

When the cursor hovers over the left div, I need to combine the entire shell except the left div with black with an opacity of 0.2.

How can i do this in css? Thanks.

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

Answer 1

To get this effect, you can use a common combinator (~) and a div with an absolute position. In this example, you should select a div with the class ".bgr" that will appear after the child hangs and make it pink / blue.

 #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

You can do this by applying a very large box-shadow , which is black and has 0.2 opacity using the color rgba() .

The container ( #wrapper ) must have overflow: hidden to hide the extra shadow.

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