在子懸停時，向容器添加背景顏色

Question

當光標懸停在左側div時，我需要重疊整個包裝器，左側div除外，黑色，不透明度為0.2。

我怎么能在CSS中做到這一點？ 謝謝。

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

Answer 1

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

容器（ #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/

Answer 2

您可以使用通用兄弟組合子（〜）和具有絕對位置的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>