存在其他類時的CSS不透明度

Question

我正在處理另一個開發人員的代碼，並想知道是否有方法在存在「疊加」時使用CSS代碼將「不同的不透明度」應用於「滾動條」，而不是「覆蓋 - 非活動「出現在」表格「下面，如下所示。這可能嗎？

/*Want scrollbar to have opacity:1 in this table*/ 
<div class ="table"> 
    <div class = "overlay"></div> 
    <div class = "scrollbar"></div> 
</div> 

/*Want scrollbar to have opacity:0 in this table*/ 
<div class ="table"> 
    <div class = "overlay-inactive"></div> 
    <div class = "scrollbar"></div> 
</div> 

/*Class structure is the developer's and cannot be changed to have scrollbar as a subclass of overlay*/ 

Answer 1

使用相鄰的兄弟操作者+以確定是否相鄰元件上存在的類：

.overlay + .scrollbar { 
    opacity: 1; 
} 

.overlay-inactive + .scrollbar { 
    opacity: 0; 
} 

Answer 2

使用+操作到下一個元素引用當前元素。

.overlay + .scrollbar { 
 
    opacity: 1; 
 
} 
 
.overlay-inactive + .scrollbar { 
 
    opacity: 0; 
 
}

<div class="table"> 
 
    <div class="overlay">1 - You can see me</div> 
 
    <div class="scrollbar">2 - You can see me</div> 
 
</div> 
 

 

 
<div class="table"> 
 
    <div class="overlay-inactive">1 - You can see me but not below</div> 
 
    <div class="scrollbar">2 - Hidden content</div> 
 
</div>