JSFiddle - React, Tailwind, and code Playground
HTML
<div id="NewsStrip">NewsStrip</div>
<div id="SeeAllEvents">SeeAllEvents</div>
CSS
#NewsStrip {
height: 80px;
background: red;
}
#SeeAllEvents {
height: 80px;
background: gold;
}
JavaScript
$(function() {
$("#SeeAllEvents").hide();
var timeoutId;
$("#NewsStrip").hover(function() {
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$("#SeeAllEvents").slideDown('slow');
}, 1000);
}
},
function () {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$("#SeeAllEvents").slideUp('slow');
}
});
});