I wanna stop the timer in handleMouseOut using the handleMouseOver function. the code is for a Navbar. I want this when the mouse got out of it this timer started, but while this time was counting if I moved my mouse over the Navbar, the timer counting being stopped and changed displayed to none dont being applied.
here is my code:
const [navOver, setNavOver] = useState(false);
const [currentItem, setCurrentItem] = useState("");
let timer;
const handleMouseOver = (item) => {
setNavOver(true);
clearTimeout(timer);
for (var i = 0; i < dropdown.length; i += 1) {
if (dropdown[i].style.display === "none") {
dropdown[i].style.display = "block";
}
}
if (!currentItem) {
setCurrentItem(item);
}
};
const handleMouseOut = (event) => {
if (!event.relatedTarget || !event.relatedTarget.closest("nav")) {
setNavOver(false);
timer = setTimeout(() => {
for (var i = 0; i < dropdown.length; i += 1) {
dropdown[i].style.display = "none";
}
}, 700);
}
};and jsx code:
<nav onMouseOut={handleMouseOut}>
<ul className="lg:flex hidden gap-4 ps-4">
{navLinks.map((item, index) => {
return (
<>
<li key={index} className="z-50">
<Link
to={item.href}
onMouseOver={() => {
handleMouseOver(item);
setCurrentItem(item);
}}
>
{item.label}
</Link>
</li>
<div className="dropdownContainer">
// there was dropdown component
</div>
</>
);
})}
</ul>
</nav>