JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hover">
     <input type="text" value="Mouseover to interrupt hover" />
</div>

<div class="css-hover">
     <input type="text" value="CSS:hover is ok." />
</div>

CSS

.hover {
    padding:40px;
}
input {
    height:25px;
}

.css-hover {
    padding:40px;
}
.css-hover:hover {
    background-color:#aaaaaa;
}

JavaScript

$(".hover").hover(function() {
    $(this).stop(true, true).animate({backgroundColor:'#aaaaaa'}, 500);
}, function() {
    $(this).stop(true, true).animate({backgroundColor: 'transparent'}, 500);
});