change opacity on hover div using jquery

hover, jquery, opacity

Solution

jsFiddle demo

`.commentact` is a child element, so use: `$(this).find(".commentact")` or `$(".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 );
    });

});

Problem

I have dynamic comment list : ``` <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>​ ``` now i need to when user hover each `div` `class='comment'` show `div` `class='commentact'` with `opacity 0` . i have this jquery function : (I set div commentact default to 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 }); }); });​ ``` Now when i hover `comment div` show all `commentact div` with opacity 0, what's problem! how to fix this? Demo

Original source