I'm trying to achieve a specific effect using JavaScript or jQuery, but I'm struggling to figure it out. I have created a simple CSS box with a hover effect that changes the color. What I want is for the hover effect to persist for a set amount of time after the mouse leaves the box, regardless of any further movement. If the user accidentally hovers over the box while the effect is still holding, I want it to continue until the set time has passed.
Here is the HTML and CSS code I'm working with:
#box {
width: 200px;
height: 300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height: 300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box"></div>
</body>
</html>