CSS隐藏类/ ID取决于其他活动类

Question

我有一个菜单栏，当页面加载时显示为1状态，只要向下滚动菜单栏缩小并给出一个.roll_activated类来控制高度和大小调整。

我有一个div，我只想在.roll_activated不是active时显示

我在这里错过了我的代码：

.roll_activated:HLinfobox{display:none !important;}

我要隐藏的div有一类HLinfobox

Answer 1

  

.roll_activated未激活

CSS中没有这样的东西，但你可以做的是嵌套元素，然后根据父母的状态显示或隐藏它们。

因此，如果您希望仅在菜单栏附加了类.roll_activated时显示的div，则可以执行此操作（假设#div div你想切换）。

#div {
  display: none;
}
.roll_activated #div {
  display: block;
}

假设这样的HTML结构：

<div class="roll_activated">
  <div id="div"></div>
</div>

这是一个codepen：https://codepen.io/anon/pen/rGgygW