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

Posted 2023-03-06

【中文标题】使用 jquery 更改悬停 div 的不透明度

【英文标题】：change opacity on hover div using jquery

【发布时间】：2012-08-15 16:07:45

【问题描述】：

我有动态评论列表：

<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 悬停在不透明度为 0 的所有 commentact div 上时，有什么问题！如何解决这个问题？ Demo

【参考方案1】：

用$(this).find(".commentact")代替$(".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/

【参考方案2】：

jsFiddle demo

.commentact 是 child 元素，所以使用：$(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 );
    );

);