CODEWITHSUNDEEP
jquery
Dom
Dom

Reputation: 3126

mouseOver event Problem with jQuery

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

Upvotes: 1

Views: 167

Answers (3)

Bostone
Bostone

Reputation: 37154

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

Upvotes: 1

karim79
karim79

Reputation: 342775

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.

Upvotes: 1

Joel
Joel

Reputation: 3060

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

Upvotes: 1

Related Questions