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

karim79 · Accepted Answer · 2009-10-15 00:48:37Z

1

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.

edited Oct 15, 2009 at 0:48

answered Oct 15, 2009 at 0:37

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel · Accepted Answer · 2009-10-15 00:36:08Z

1

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

answered Oct 15, 2009 at 0:36

Joel

3,0601 gold badge22 silver badges33 bronze badges

Comments

Bostone · Accepted Answer · 2009-10-15 03:41:50Z

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

edited Oct 15, 2009 at 3:41

answered Oct 15, 2009 at 0:10

Bostone

37.2k40 gold badges172 silver badges230 bronze badges

Collectives™ on Stack Overflow

mouseOver event Problem with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related