JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top">
    <div id="overlay">Move the mouse around the links to see what's happening.</div>
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <div style="clear:both;"></div>
</div>

CSS

#top {
    position: relative;
    padding: 280px 0 0 0;
}
    #overlay {
        position: absolute;
        top: 0;
        left: 0;
        background: url(http://www.axdn.com/redist/axmb_logo.png) no-repeat;
        width: 400px;
        height: 300px;
        font-weight: bold;
    }
    #nav {
        
    }
        #nav li {
            float: left;
        }
            #nav li a {
                display: block; 
                padding: 15px 30px; 
                color: red; 
                background: yellow;
            }
            #nav li a:hover {
                background: green;
            }

JavaScript

var $overlay = $("#overlay");
$overlay.hover(function() {
   $overlay.text("Hovering over overlay").css('color', 'red');
});
$("#nav li a").hover(function() {
   $overlay.text("Hovering over a link").css('color', 'green');
});