javascript - 无法在 jquery 中选择不透明度？

Question

当容器 div(在本例中为#header)的不透明度为 0.5 时，我想覆盖链接列表上的 CSS 悬停操作。我过得很艰难。

这是我的 jQuery:

  jQuery(window).scroll(function() {
    if(jQuery(window).scrollTop() > 200) {
        jQuery("#header").css('opacity', '0.5');
    } else {
        jQuery("#header").css('opacity','1');
    }
  });

  if(jQuery("#header").css("opacity") != 1){
      jQuery("#nav li a").hover(function(){
        jQuery(this).css("color","rgba(63, 131, 202, 1)");
      });
  }

这是我的 CSS:

#nav li a {
    color:rgba(63, 131, 202, 1);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#nav li a:hover {
    color:rgba(63, 131, 202, 0.7);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

我也试过在 jQuery 中用 none 覆盖每个转换，但它不起作用。我怎么能这样做？当不透明度不是 1 时，我是否应该尝试覆盖所有非悬停属性，然后像我上面那样覆盖悬停属性？不确定该怎么做。

Answer 1

我建议在 CSS 中保留尽可能多的样式，并简单地修改需要更改的元素上的 class(或层次结构中较高的元素，如 body ，如果它要改变几个元素)。这是一个例子:

Javascript:

jQuery(window).scroll(function() {
    jQuery(document.body).toggleClass("scrolledDown", jQuery(window).scrollTop() > 200)
});

CSS

#nav li a {
    color:rgba(63, 131, 202, 1);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#nav li a:hover {
    color:rgba(63, 131, 202, 0.7);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#header {
    opacity: 1;
}

body.scrolledDown #header {
    opacity: 0.5;
}

body.scrolledDown #nav li a:hover {
    color: rgba(63, 131, 202, 1);
}

这将自动管理您的状态并保持您的样式和 javascript 分离，这总是很好。您不必将 class 添加到 body 元素，但我在这里这样做是为了一个简单的示例并且缺乏对其余 DOM 的了解结构。