CSS 隐藏类/ID 取决于其他事件类

Question

我有一个菜单栏，它在页面加载时显示为 1 状态，一旦向下滚动菜单栏就会缩小并被赋予类 .roll_activated它控制高度和大小。

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

我的代码在这里遗漏了一些东西:

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

我想隐藏的 div 有一个类 HLinfobox

Answer 1

.roll_activated is not active

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

因此，如果您只想在菜单栏附加类 .roll_activated 时显示的 div，您可以这样做(假设 #div 是 您想要切换的 div)。

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

假设 HTML 结构如下:

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

这是一个代码笔:https://codepen.io/anon/pen/rGgygW