JQuery slideToggle stays open on hover

Question

I have a div that I linked the jQuery hover event to activate 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 the div.GraySquare right below it. In fact, the gray box slides down from the red box. The problem I am facing is that when the mouse moves around the gray div, the slide switches. I want him to stay on falling over a red or gray square.

Any help is appreciated.

Answer 1

Change it so that the hover is active on the containing div "Square":

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