CODEWITHSUNDEEP
jqueryhover
bflemi3
bflemi3

Reputation: 6790

jquery hover not working as expected

I have a nav menu with a subnav. The subnav should show when the parent li is hovered upon, but I'm not getting the expected results...

html

<div class="nav <%= cssClass %>">
    <ul>    
        <li><a runat="server" href="http://www.synergisticsinstitute.com/">Welcome</a></li>
        <li>
            <a runat="server" href="http://www.synergisticsinstitute.com/bhot-for-men/">BHOT&trade; For Men</a>
            <div class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/research/">BHOT&trade; Research</a>
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/faq/">FAQ for Men</a>
            </div>
        </li>
        <li>
            <a runat="server" class="bhot-for-women" href="http://www.synergisticsinstitute.com/bhot-for-women/">BHOT&trade; For Women</a>
            <div class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-women/faq/">FAQ for Women</a>
            </div>
        </li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/hcg-weight-loss/">hCG Weight Loss</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/nutrition/">Nutrition</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/supplements/">Supplements</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/medical-director/">Meet Our Medical Director</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/contact-us/">Contact Us</a></li>
    </ul>
</div>

jquery

$(document).ready(function () {
    var $nav = $('.nav');
    $nav.find('div.subnav').each(function () {
        $(this).parent().hover(navMouseIn(this), navMouseOut(this));
    });
});

function navMouseIn(elem) {
    $(elem).show();
}

function navMouseOut(elem) {
    $(elem).hide();
}

Upvotes: 0

Views: 234

Answers (2)

Aram Kocharyan
Aram Kocharyan

Reputation: 20421

http://jsfiddle.net/8btwV/

$(document).ready(function () {
    $('.nav div.subnav').each(function () {
        var subnav = $(this);
        subnav.parent().hover(function() {navMouseIn(subnav);},
                               function() {navMouseOut(subnav);} );
    });
});

function navMouseIn(subnav) {
    subnav.show();
}

function navMouseOut(subnav) {
    subnav.hide();
}​

You were using a needless .find which just narrows down your selector (also see .filter) by looking in the selected element. More importantly, you need to put those function callbacks into an asynchronous callback for it to be called at a later time - at the moment your code was calling them once immediately. Also, this doesn't refer to the jQuery element anymore in these callbacks, so I used subnav as a scoped variable instead.

Upvotes: 1

FreeCandies
FreeCandies

Reputation: 1113

You should pass the function object as a callback, while you are calling the navMouseIn and navMouseOut. Basically you a passing their return value as a handler. Your code should look like this:

$(document).ready(function () {
    var $nav = $('.nav');
    $nav.find('div.subnav').each(function () {
        $(this).parent().hover(navMouseIn, navMouseOut);
    });
});

function navMouseIn() {
    $("div.subnav:first", this).show();
}

function navMouseOut() {
    $("div.subnav:first", this).hide();
}

Upvotes: 0

Related Questions