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.
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");
}
);