mouseOver event Problem with jQuery

HI,

im building a menu where hov开发者_运维百科er on li a .li_bcg is appearing. Unfortunately no matter what ill do, when hover over menu all li_bcg appearing at this same time.

This is my URL to maybe make it a bic clearer

<ul>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg"/>
    </li>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg" />
    </li>
    <li>
        <a href="#">Text</a>
        <div class="li_bcg" />
    </li>
</ul>

And my function

var bcg = $('.li_bcg')

    $.each($('li a'), function(){
                         $('li a').mouseover(

                                function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 0} ,200)})}

                                    ),
                          $('li a').mouseout(

                                function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 1} ,200)})}                                  
                                    )
                            })

Thank you for your help in advance

This should do it:

// hover( over, out )
$('ul > li > a').hover(function() {
        $(this).next(".li_bcg")
               .stop()
               .animate( {'opacity' : 0} ,200)});
    }, 

    function() {
        $(this).next(".li_bcg")
               .stop()
               .animate( {'opacity' : 1} ,200)});
    }
);

You can use next for a direct way to get the next sibling (.li_bcg) div after the hovered hyperlink. Also not the hover method:

Simulates hovering (moving the mouse on, and off, an object).

I've included hover's function signature as a comment above the code.

Didn't test, but should be what you are looking for:

$('li').mouseover(function(ev){
  $(this).find('.li_bcg').show();
});

Or, to only detect hover over the <a>:

$('li a').mouseover(function(ev){
  $(this).parent().find('.li_bcg').show();
});

And then add the reverse for mouseout

This is as expected since $('.li_bcg') returns you ALL the divs that has this class. You need to use $(this).find('.li_bcg') to filter it to the child div of LI that triggered the event