JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">AAA</div>
<div id="header_hover">BBBBBB</div>

CSS

#header, #header_hover {
    height:260px;
    padding:0;
    margin:20px 10px;
    position:absolute;
    top:20px;
}

#header {
    background:red;
    z-index:10;
}

#header_hover {
    background:blue; 
    z-index:5;
}

JavaScript

$("#header").hover(function() {
    $(this).fadeTo("fast", 0);
    $('#header_hover').show();
    $('#header_hover').fadeTo("fast", 1.0);    
}, function() {
    $(this).fadeTo("fast", 1.0); 
    $('#header_hover').fadeTo("fast", 0, function() {
        $(this).hide();
    });               
});