JSFiddle - React, Tailwind, and code Playground

by Josh Vito

HTML

<div style="position: relative;" class="container"> <a href="#games">
    <div class="sidenavOff">
        <!--<img src = "images/card_normal.png" />
        <img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
        <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />-->
        <p style="width:100px;height:100px;background:#ccc;">No Hover</p>
    </div>
    <div class="sidenavOver">
        <!--<img src = "images/hover/card_hover.png" />
        <img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
        <img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
        Show a bunch of text here
        <img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />-->
        <p style="width:100px;height:100px;background:#f00;">Hover</p>    
    </div>
    </a>

</div>

CSS

.container {
    width:100px;
    height:100px;
    overflow:hidden;
    display:block;
}
.container div {
    display:inline-block;
    position:relative;
    float:left;
}

JavaScript

$(".sidenavOver").hide();
//on hover over the a tag with atribute href='#games' 
$('.container').on({
    mouseenter: function () {
        $(".sidenavOff").hide(); //On mouseover, hode the first div
        $(".sidenavOver").show();
    },
    mouseleave: function () {
        $(".sidenavOff").show();
    }
});