On child hover, add background color to container

Question

When the cursor hovers the left div, I need to overlap the whole wrapper, except for left div, with black color with opacity 0.2.

How can I do that in css? Thanks.

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

Answer 1

You can use general sibling combinator (~) and a div with absolute position to obtain this effect. In that example, you would be selecting the div with the class ".bgr" that come after the hovered child and making 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 could do that by applying a very large box-shadow which is black and has 0.2 opacity by using rgba() color.

The container (#wrapper) must have overflow: hidden to hide excess 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/