JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<img id="image" src="http://www.guru.com/GuruFiles/pro/870219/48_button_green1.png" />

<span id="content">
    <a href="http://www.google.com">Link</a>
    some content here
</span>

CSS

#image{
    left:0px;
    position:absolute;
    z-index: 10;
}
#content{
    top:48px;
    left:0px;
    position:absolute;
    height: 100px;
    border: 1px solid #f00;
    display: block;
    z-index: 0;
    width: 100px;
}

JavaScript

$(document).ready(function() {
    $('#content').hide();
    var over_img = false;
    var over_span = false;
    $('#image').live('mouseover', function() {
        over_img = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#content').live('mouseover', function() {
        over_span = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#image').live('mouseout', function() {
        over_img = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
    $('#content').live('mouseout', function() {
        over_span = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
});