JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="dv"></div>

CSS

#div1{
    width : 400px;
    height : 400px;
    background : red;
    opacity : 0;
}

JavaScript

var div = $('#div1'),t;


function changeStyle(element,prop,value){
   element.css(prop,value);
}

function showDiv(){
    changeStyle(div,'opacity','1');
}

function hideDiv(){
    changeStyle(div,'opacity','0');
}

$("#div1").live('mouseenter',function(){
    clearTimeout(t);
    t = setTimeout(showDiv,3000);
});
$("#div1").live('mouseleave',function(){
    clearTimeout(t);
    t = setTimeout(hideDiv,3000);
});
/*
div.addEventListener('mouseover',function(){
    clearTimeout(t);
    t = setTimeout(showDiv,3000);
},false);

div.addEventListener('mouseout',function(){
    clearTimeout(t);
    t = setTimeout(hideDiv,3000);
    //hideDiv();
},false);*/