Question

I’m trying to do something that I dont know how to do, but I know can be done. There are 2 divs, they both expand the full width of the browser window, they are both 450px in height. So basically 1 block on top of the other. I want to put a div in between these two, that gets revealed from hovering over something in the top Div(button or whatever). The hover item will be at the bottom of the top div.

But I need the middle div to remain active while its contents are being hovered… over.

What would the jquery look like? This is what I have so far.

    <script type="text/javascript">
        $(document).ready(function() {
            $("#toggleh1").hover(function() {
                 $(".header2").slideDown(400);

            }, function() {
                 $(".header2").slideUp(400);
            });
        });
    </script>

Thanks

Answer 1

Your best bet may be to use a timeout instead of a .hover()

$(document).ready(function() {
    var t; // This will be a timeout
    $('#toggleh1').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }

        $('.header2').slideDown(400);
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });

    $('.header2').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });
});

To explain further, when you mouseover the trigger element, the div is shown. When your mouse leaves the trigger element, the browser starts a .5 second countdown. If it reaches the end of that countdown, the div will be hidden. If, before that countdown ends, you mouseover the trigger OR the div itself, the countdown will be stopped. If your mouse leaves the div, the countdown will be started again.

Please note that you may want to play around with .mouseover() vs. .mouseenter(), and .mouseout() vs. .mouseleave()