mouseOver event Problem with jQuery

Question

HI,

im building a menu where hover 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

Answer 1

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

Answer 2

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

Answer 3

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.