在 javascript addclass 之后它添加了类但 css 属性不起作用

Question

请有人帮助我吗？我的网页是：http : //etinklapis.lt/

这里 .header-line after scroll 有一个额外的类 .header-line .active 但 css 看不到它并且不会改变背景颜色。你可以看到我的 css，那里 .header-line .active 是带有 background-color 属性的。为什么我的背景还是透明的？

CSS：

.header-line {
  width: 100%;
  height: 60px;
  background-color: rgba(255,255,255,0.00);
}
.header-line .active {
  background-color: white;
}

标题：

<div class="header-line">header</div>

Javascript：

$(function() {
  $(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
      $(".header-line").addClass("active");
    } else {
      //remove the background property so it comes transparent again (defined in your css)
      $(".header-line").removeClass("active");
    }
  });
});

Answer 1

那是因为在您的 css 文件中，您有.header-line .active { ... }，这意味着.active类中的.header-line类。

您应该将其更改为.headerline.active { ... }（删除空格）