JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
    <div id="blue"></div>
    <div id="red"></div>
</div>

CSS

#blue {
    position:absolute;
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    background:blue;
    z-index:1;
}
#red {
    position:absolute;
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    background:red;
    z-index:0;
}

JavaScript

$(function () {
    $("#wrapper").mouseenter(function () {
        $("#blue").stop(true, true).fadeOut("normal");
        $("#red").stop(true, true).fadeIn();
    });

    $("#wrapper").mouseleave(function () {
        $("#blue").stop(true, true).fadeIn("10000");
        $("#red").stop(true, true).fadeOut();
    });
})