JSFiddle - React, Tailwind, and code Playground

by m v

HTML

<div id="container">
    <div class="section one"></div>
        <div class="inner"></div>
    <div class="section two"></div>
        <div class="inner"></div>
    <div class="section three"></div>
        <div class="inner"></div>
    <div class="section four"></div>
        <div class="inner"></div>
</div>

CSS

#container {
    width:500px;
}
.section {
    width:250px;
    height:250px;
    float:left;
    cursor:pointer;
}
.one {
    background:rgb(100, 100, 226);
}
.two {
    background:pink;
}
.three {
    background:gray;
}
.four {
    background:rgb(110, 162, 110);
}
.inner {
    width:250px;
    height:250px;
    float:left;
    cursor:pointer;
    background:orange;
}
.section:hover {
}

JavaScript

$(document).ready(function () {
    $(".inner").hide();
    $(".section").mouseenter(function (event) {
        $(this).hide();
        $(this).next(".inner").show();
    });
    //$(".section").mouseleave(function (event) {
    $(".inner").mouseleave(function (event) {
        $(this).prev().show();
        $(this).hide();
    });
});