子のホバー上でコンテナに背景色を追加する

Question

カーソルが左のdivに移動すると、左側のdivを除いて、不透明度0.2の黒色でオーバーラップする必要があります。

どのように私はCSSでそれを行うことができますか？ありがとう。

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

Answer 1

あなたはこの効果を得るために絶対位置と一般的な兄弟コンビネータ（〜）とdiv要素を使用することができます。その例では、あなたは、育てられた子供の後に来て、それをピンク/青にするクラス ".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

あなたは黒で、rgba()色を使用して0.2不透明度を持っている非常に大きなbox-shadowを適用していることを行うことができます。

余分な影を隠すには、コンテナ（#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/