JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide">Hover me !!!</div>

<div class="controls">CONTROLS</div>

CSS

#slide {background: red; height: 450px; width: 600px; margin: 30px; position: relative;}

.controls {position: relative; left: 250px; top: -100px; height: 50px; width: 200px; background: cyan; vertical-align: middle; text-align: center; line-height: 50px; display: none;}

JavaScript

var timer;

$('#slide').on({
    mouseenter: function() {
        clearTimeout(timer);
        $('.controls').show();
    },
    mouseleave: function() {
        timer = setTimeout(function() {
            $('.controls').hide();
        }, 400);
    }
});

$('.controls').on({
    mouseenter: function() {
        clearTimeout(timer);  // if the mouse entered the controls, 
    },                        // clear the timeout, keeping the controls visible,
    mouseleave: function() {
        timer = setTimeout(function() {
            $('.controls').hide();
        }, 400);
    }
});