Question

我正在使用其他开发人员的代码，并想知道是否有一种方法可以在存在“overlay”时使用CSS代码将“不同的不透明度”应用于“滚动条”，而不是在“table”下面存在“overlay-inactive”时“ 如下所示。这可能吗？

/*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;
}

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

Answer 2

使用相邻的兄弟运算符+来确定该类是否存在于相邻元素上：

.overlay + .scrollbar {
    opacity: 1;
}

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

其他课程出现时的CSS不透明度

2 个答案: