JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div id="mapBackground">
    <div id="americas">
        <div class="cont">
            <h2>Americas</h2>
            <ul>
                <li><a href="#">USA</a></li>
                <li><a href="#">USA</a></li>
                <li><a href="#">USA</a></li>
            </ul>
        </div>
    </div>
    <div id="europe">
        <div class="cont">
            <h2>Europe</h2>
            <ul>
                <li><a href="#">UK</a></li>
                <li><a href="#">UK</a></li>
                <li><a href="#">UK</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

#mapBackgruond {
    width: 600px;
}

#mapBackground > div {
    width: 200px;
    background: red;
    float: left;
    height: 20px;
}

#mapBackground > div > div.cont {
    display: none;
    background: yellow;
}

JavaScript

$(document).ready(function(){
    
    $('#mapBackground > div').hover(function(){
        $(this).children('div.cont').fadeIn(150);
    }, function(){
        $(this).children('div.cont').fadeOut(150);
    });
    
});