JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div class="one">
    div padrão
</div>

<!-- hover -->
<div class="one-hover">
    div hover
</div>

CSS

.one {
    width:200px;
    height:300px;
    background:#346541;
    color:#FFF;
}
.one-hover {
    width:200px;
    height:300px;
    background:#999;
    color:#000;
    position:absolute;
    top:10px;
}

JavaScript

var SemConflito = jQuery.noConflict();

SemConflito(document).ready(function() {
    
    //setando a altura da div e escondendo ela
	SemConflito('.one-hover').css('height', SemConflito('.one-hover').height());
	SemConflito('.one-hover').hide();
    
    //efeito mouseover
    var timer1;
	SemConflito(".one").on('mouseover', function(){
		clearTimeout(timer1);
		timer1 = setTimeout(function(){
			SemConflito(".one-hover").stop().slideDown({duration: 400, easing: 'easeInCubic'}); }, 300);
	});
    
    //efeito mouseleave da div primário
    SemConflito(".one").on('mouseleave', function(){ 
        SemConflito(".one-hover").stop();
    	clearTimeout(timer1);
    });
    
    //efeito mouseleave da div flutuante
    SemConflito(".one-hover").on('mouseleave', function(){
        SemConflito(".one-hover").stop();
        clearTimeout(timer1);
        SemConflito(".one-hover").fadeOut(100);
    });
});