JSFiddle - React, Tailwind, and code Playground

HTML

<ul><li><a href="#">foo</a></li><li><a href="#" id="bar">bar</a></li></ul>

CSS

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
li{
    float: left;
}
#bar{
    background: black;
    color: white;
}

JavaScript

$('li').hover(function(){
    //do something here
},function(){
    setTimeout(function(){
			if($('li').is(':hover') === false )
			console.log('out');
		},100);
});