リストアイテムの不透明度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

// 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/

Answer 2

あなたはすべての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 }); 
});