JSFiddle - React, Tailwind, and code Playground

HTML

<a id="foo" href="#">Foolink</a><br />
<a id="bar" href="#">Barlink</a><br />
<a id="baz" href="#">Bazlink</a><br />

<div id="box">Hover a link!</div>
00

CSS

div#box {
    background-color: green;
    color: white;
    height: 100px;
    width: 100px;
}
div#box.bang {
    background-color: red;
}

JavaScript

(function game() {
    var timeoutID;
    $('a').mouseover(function() {
        $('#box').html('All is well.').removeClass('bang');
        clearTimeout(timeoutID);
        // do stuff
    });
    $('a').mouseout(function() {
        $('#box').html('You have 2 seconds to return!');
        timeoutID = setTimeout(function() {
            $('#box').addClass('bang').html('Too Late!');
            // do stuff
        }, 500);
    });
}());