SO - 22057927

by Arun P Johny

HTML

<div id="ct">
    <span id="target">some content</span>
    <div id="e"></div>
</div>

CSS

#ct {
    position: relative;
}
#e {
    position: absolute;
    display: none;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    opacity: .5;
    z-index: 100;
    background-color: red;
}

JavaScript

jQuery(function ($) {
    $('#target').hover(function () {
        var $target = $(this);
        clearTimeout($target.data('hoverTimer'));
        $('#e').show();
    }, function () {
        var $target = $(this);
        var timer = setTimeout(function () {
            $('#e').hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#e').hover(function () {
        clearTimeout($('#target').data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});