Slidetoggle div if mouse cursor is not over them

Question

I want to hide or toggle upwards a DIV if the mouse cursor is not over the following two ids;

notifications and notifications_show

The HTML I'm using is this:

<a href="javascript:void(0);" id="notifications">Notifications{$pm_alert_msg}</a>
<div style="display: none;" id="notifications_show" class="notifications_show">{$notifications}</div>

And the jQuery is:

jQuery(document).ready(function($){
    $("#notifications").on('click', function(){
        $('#notifications_show').stop().slideToggle("slow");
    });
});

But I don't know how to make it so if the cursor os NOT over the above mentioned two ids then the div notifications_show should toggle upwards or hide.

Please help!

Answer 1

Try

jQuery(document).ready(function ($) {
    $("#notifications").on('click', function () {
        $('#notifications_show').stop().slideToggle("slow");
    });


    $('#notifications').hover(function () {
        var $target = $('#notifications_show');
        clearTimeout($target.data('hoverTimer'));
    }, function () {
        var $target = $('#notifications_show');
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#notifications_show').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
         var $target = $(this);
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });
});

Demo: Fiddle