JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul>
    <li><a href="#bike">Bike</a></li>
    <li><a href="#atv">ATV</a></li>
    <li><a href="#utv">UTV</a></li>
    <li><a href="#snow">Snow</a></li>
    <li><a href="#water">Water</a></li>
</ul>

JavaScript

var hoverIntent;
$('a').mouseenter(function(){
    clearInterval(hoverIntent);
    $this = $(this)
        hoverIntent = setTimeout(function () {
    $this.css('color','red');
        },500);
}).mouseleave(function(){
    clearInterval(hoverIntent);
    $(this).css('color','blue');
    })