// The Javascript Code
var timer;
$(document).ready(function () {
$("li").hover(
function () {
clearTimeout(timer);
$(this).css("background-color", "red");
},
function () {
var $self = $(this);
timer = setTimeout(function () {
$self.css("background-color", "transparent");
}, 1000);
}
);
});<!-- The HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>title</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>Consider the above code snippet(has only html and small jquery code snippet).
What I have are multiple li items. When the user hover's over any of these li items, the background-color should change to red. However, when they hover "off", the background-color should go back to the default value(transparent). However, I want this to have a timeout of 1000ms after the hover-off event.
However this is not working as I expected(maybe due to single timer variable) as in if I hover over multiple li items quickly, then only the last hover "off'd" element is being changed to default background while all other li items are stuck at background-color of red.
Update:
I want the color to be reset individually for li item. That is if I hover over li-1, then li-2 and then if I hover off, then li-1 should be reset and then after some milliseconds, li-2 should be reset. I don't want them to reset all at the same time.
You need not to have any timer object. Simply change your script like: