Question

I have a div that I have bound the jQuery hover event to activate a slideDown using slideToggle:

<div class="Square">
    <div class="RedSquare"></div>
    <div class="GraySquare"></div>
</div>

$("div.RedSquare").hover(
    function() {
        $(this).siblings("div.GraySquare").slideToggle("fast");
    },
    function() {
        $(this).siblings("div.GraySquare").slideToggle("fast");
    }
);

It toggles a div ‘.GraySquare’ right below it. Basically making a gray box slide down from the red box. The problem I am facing is that when the mouse moves over the gray div the slide toggles up. I want it to remain down when hovering over the red or gray square.

Any help is appreciated.

Answer 1

Change it so the hover is active on the containing “Square” div:

$("div.Square").hover(
    function() {
        $(this).find("div.GraySquare").slideToggle("fast");
    },
    function() {
        $(this).find("div.GraySquare").slideToggle("fast");
    }
);