jquery - 使用 jquery 更改悬停 div 的不透明度

Question

我有动态评论列表：

<div class="comment">
  <div class="commentact">
    Test1
  </div>
</div>
<div class="comment">
  <div class="commentact">
    Test2
  </div>
</div>
<div class="comment">
  <div class="commentact">
    Test3
  </div>
</div>​

现在我需要当用户将每个div class='comment'节目悬停div class='commentact'在opacity 0.

我有这个 jquery 函数：（我将 div commentact 默认设置为 opacity 0.2）

$(".commentact").css('opacity','0.2');

$(document).ready(function(){

   $(".comment").hover(function() {
      $(".commentact").stop().animate({ opacity: 1 });
   }, function() {
      $(".commentact").stop().animate({ opacity: 0.2 }); 
   });

});​

现在当我悬停comment div显示所有commentact div不透明度为 0 时，有什么问题！如何解决这个问题？演示

Answer 1

jsFiddle 演示

.commentact是一个子元素，所以使用：$(this).find(".commentact")
或$(".commentact", this)

$(function(){ // DOM ready

    $(".commentact").fadeTo(0, 0.2); // initial opacity

    $(".comment").hover(function( e ) {
       $(".commentact", this).stop().fadeTo(300, e.type=="mouseenter"? 1 : 0.2 );
    });

});

Answer 2

而不是$(".commentact")使用$(this).find(".commentact")：

$(".commentact").css('opacity','0.2');
$(document).ready(function(){
  $(".comment").hover(
    function() {
      $(this).find(".commentact").stop().animate({ opacity: 1 });
    },
    function() {
      $(this).find(".commentact").stop().animate({ opacity: 0.2 }); 
    });
});​

演示：http: //jsfiddle.net/ZLX3L/2/