0

当容器 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 时，我应该尝试覆盖所有非悬停属性，然后像上面那样覆盖悬停属性吗？不知道该怎么办。

4

3 回答 3

1

作为一种解决方法，您可以通过以下方式获得更大的成功：

jQuery("#header").fadeTo(0, 0.5);

代替：

jQuery("#header").css('opacity', '0.5');
于 2013-01-22T03:06:09.293 回答
1

在这种情况下，在调试器中单步调试代码很有用。在这个特定场景中，您会发现 jQuery.fn.css() 会返回一个字符串，即使您正在查询一个数字 css 属性，所以您需要 parseFloat() 结果。

if(parseFloat(jQuery("#header").css("opacity")) != 1)

话虽如此，我强烈建议完全放弃对样式属性的查询，而是使用类来管理您的状态。演示不是信息！作为奖励，您的链接悬停可能只是基于类名的基于 css 的覆盖，而不是基于 javascript 的悬停。

于 2013-01-22T03:06:29.350 回答
1

我建议在 CSS 中保留尽可能多的样式，并简单地修改 aclass在需要更改的元素上（或者在层次结构中更高的元素上，例如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 结构的其余部分缺乏了解。

于 2013-01-22T03:10:04.413 回答