使用 jquery 强制 css 用于某个类

Question

我有一个带有自动旋转导航的 jquery 横幅循环。导航设置在一个列表中，其中活动幻灯片有一个 LI 类 activeSlide：

<ul id="billboard-nav">
    <li class="activeSlide"><span class="overlay">NAV1</span></li>
    <li><span class="overlay">NAV2</span></li>
    <li><span class="overlay">NAV3</span></li>
</ul>

Jquery 设置所以 .overlay 为不透明度 0，悬停时变为不透明度 1。

<script>
$(function() {  

    $("#billboard-nav li .overlay").css({ opacity: 0 });

    $("#billboard-nav li").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );

});
</script>

这很好用，除了我需要 .activeSlide .overlay 保持不透明度：1。我可以通过样式表设置 opacity:1!important，但这是 CSS3，ie7,8 不支持。 JS 解决方案会更受欢迎。

任何帮助将不胜感激。谢谢。

Answer 1

首先询问 li 是否包含 activeSlide 类，将其放入每个函数中的行之前

if(!$(this).attr("class") || $(this).attr("class")!="activeSlide"

另一种选择是：

$("#billboard-nav li").no(".activeSlide").hover(
        function() {$(this).children('.overlay').stop().animate({"opacity": "1"}, 100);},
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );

Answer 2

只需添加一个 Condition 并检查当前 li 是否有一个 activeSlide 类。如果是，则什么也不做。

$(function() {

    $("#billboard-nav li .overlay").css({
        opacity: 0
    });

    $("#billboard-nav li").hover(

    function() {
        $(this).children('.overlay').stop().animate({
            "opacity": "1"
        }, 100);
    }, function() {
        if ($(this).hasClass('activeSlide')) {
           // Because this has ActiveSlide class do nothing
        }
        else {

            $(this).children('.overlay').stop().animate({
                "opacity": "0"
            }, 1200);
        }
        });

    });​

在此处查看FIDDLE

Answer 3

试试这个：

$('#billboard-nav li').hover(function() {
  if ($('this').hasClass('activeSlide')) {

  }
  else {
        function() {$(this).children('.overlay').stop().animate({"opacity": "0"}, 1200);}
    );
  }
});