Khi di chuột con, thêm màu nền vào vùng chứa

Question

Khi con trỏ di chuyển div bên trái, tôi cần chồng lên toàn bộ trình bao bọc, ngoại trừ div bên trái, với màu đen có độ mờ là 0,2.

Tôi có thể làm điều đó bằng css như thế nào? Cảm ơn.

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

Answer 1

Bạn có thể sử dụng combinator chung anh chị em (~) và một div với vị trí tuyệt đối để có được hiệu ứng này. Trong ví dụ đó, bạn sẽ chọn div với lớp ".bgr" xuất hiện sau con lơ lửng và làm cho nó có màu hồng/xanh dương.

#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

Bạn có thể làm điều đó bằng cách áp dụng một rất lớn box-shadow mà là màu đen và có 0,2 opacity bằng cách sử dụng rgba() màu.

Vùng chứa (#wrapper) phải có overflow: hidden để ẩn bóng thừa.

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