jQuery slideToggle reste ouvert au survol de la souris

Question

J'ai un div auquel j'ai lié l'événement jQuery hover pour activer un slideDown en utilisant 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");
    }
);

Il fait basculer une div '.GraySquare' juste en dessous. En fait, il s'agit de faire glisser une boîte grise vers le bas à partir de la boîte rouge. Le problème auquel je suis confronté est que lorsque la souris passe sur la div grise, la glissière remonte. Je veux qu'il reste en bas lorsqu'on passe la souris sur le carré rouge ou gris.

Toute aide est appréciée.

Answer 1

Modifiez-le de manière à ce que le survol soit actif sur la div "Square" qui le contient :

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