JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS

#test li:hover { cursor: pointer; }

JavaScript

$(function(){
    var delay = 5000,
        interval = null;
    $('#test li').hover(
        function (){
            var ele = $(this).addClass('hover'),
                interval = setInterval(function(){
                    if(ele.hasClass('hover')){
                        ele.html('delay: '+ delay);
                    }
                }, delay);
        },
        function(){
            clearInterval(interval);
            $(this)
                .removeClass('hover')
                .html('Text');
        }
    )
})