列表项不透明度 0.7，活动项除外

Question

我更改了不透明度为 0.7 的列表项，效果很好。在同一个列表中，我有一个类和 id 为“活动”的列表项。

意思是活动列表项的不透明度为1，但这不起作用。

这是 jQuery：

            $("#active").css({ opacity: 1 });
            $(".nav_top ul li a").css({ opacity: 0.7 });

            $(".nav_top ul li a").hover(function()
            {
                $(this).animate({ opacity: 1 });
            },
            function()
            {
                $(this).animate({ opacity: 0.7 });
            });

这是列表：

<div class="nav_top">
    <ul>
<li class="active"><a href="#">item 1</li>
<li><a href="#">item 2</li>
<li><a href="#">item 3</li>
<li><a href="#">item 4</li>
<li><a href="#">item 4</li>

Answer 1

你可以用 CSS 和一点 jQuery 来完成这一切

<div class="nav_top">
    <ul>
        <li class="active"><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
        <li><a href="#">item 4</a></li>
        <li><a href="#">item 4</a></li>
    </ul>
</div>

并使用这些跨浏览器不透明度样式：

.nav_top li {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}

.nav_top li.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}

还有一些 jQuery

// hover on the li, not the a, since the li has the class
$(".nav_top ul li").hover(function() {
    $(this).animate({ opacity: 1 });
}, function() {
    $(this).animate({ opacity: 0.7 });
});

Answer 2

// Global "all are 0.7 opacity" rule
// exclude the li with the active class though [:not(.active)]
$(".nav_top ul li:not(.active) a")
  // change items to 0.7 opacity
  .css({ opacity: 0.7 })
  // and bind to hover
  .hover(function(){
      $(this).animate({ opacity: 1 });
  },function(){
      $(this).animate({ opacity: 0.7 });
  });

不过有几点：

1. 确保关闭您的锚 (<a></a>) 标签）
2. 您可以使用:not() 排除active 类<li>

在这里找到演示：http://jsfiddle.net/xJF7X/2/