JSFiddle - React, Tailwind, and code Playground

by adeneo

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() {
    var T1, T2;
    $('#content').hide();
    $('body').on({
        mouseenter: function() {
            clearTimeout(T2);
            T1 = setTimeout(function() {
                 $('#content').slideDown(1000);
            }, 2000);
        },
        mouseleave: function() {
            T2 = setTimeout(function() {
                 $('#content').slideUp(1000);
            }, 2000);    
        }
    }, '#image, #content');
});