I have the following divs:

<div id="foo">
...
    <div id="bar" class="container hidden">
    ...
    </div>
</div>

I use Twitter Bootstrap 3 and I added the hidden class to automatically hide the second div by default.

I have the following code:

$(document).ready(function() {
    $("#foo").hover(
        function() {
            $("#bar", this).toggleClass("hidden");
        }, function() {
            $("#bar", this).toggleClass("hidden");
    });
});

It seems to work correctly BUT if the mouse if already hover the #foo div during the page load, it applies by default the hover effect. After that if I move the mouse outside the #foo div, it applies again the toggleClass and displays the inner #bar div.

How to prevent this behaviour on page load?

I have the following divs:

<div id="foo">
...
    <div id="bar" class="container hidden">
    ...
    </div>
</div>

I use Twitter Bootstrap 3 and I added the hidden class to automatically hide the second div by default.

I have the following code:

$(document).ready(function() {
    $("#foo").hover(
        function() {
            $("#bar", this).toggleClass("hidden");
        }, function() {
            $("#bar", this).toggleClass("hidden");
    });
});

It seems to work correctly BUT if the mouse if already hover the #foo div during the page load, it applies by default the hover effect. After that if I move the mouse outside the #foo div, it applies again the toggleClass and displays the inner #bar div.

How to prevent this behaviour on page load?

• javascript
• jquery
• html
• css
• jquery-hover

Share Improve this question Follow edited Apr 16, 2014 at 14:50 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Apr 16, 2014 at 14:42 jreanjrean 1344 bronze badges 3

• Is it within $(document).ready()? – Scimonster Commented Apr 16, 2014 at 14:46
• yeah, could you try that? – Aldren Terante Commented Apr 16, 2014 at 14:47
• Context selector is useless here, id should be unique. – Karl-André Gagnon Commented Apr 16, 2014 at 14:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This is a proper way to do it:

$("#foo").hover(
    function() {
        $("#bar", this).addClass("hidden");
    }, function() {
        $("#bar", this).removeClass("hidden");
});

No one mention it but hover pseudo event accept in/out handler, so you could toggle class:

$("#foo").hover(function () {
    $("#bar").toggleClass("hidden");
});

And as IDs must be unique on document context, no need to pass context, just target element with ID.

Instead of using toggleClass() try using addClass() and removeClass():

$("#foo").hover(

    function() {

        $("#bar", this).addClass("hidden");
    }, function() {

        $("#bar", this).removeClass("hidden");
});

This way allows you to have a more precise control over the elements.