Question

我更改了不透明度为0.7的list-items，工作正常。在同一个列表中，我有一个列表项，其中类和id为“active”。

意思是活动列表项的不透明度为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 });
  });

但有几件事情：

确保关闭您的主播（<a></a>）标签）
您可以使用:not()排除active班级<li>

在此处找到演示：http://jsfiddle.net/xJF7X/2/

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

2 个答案: