Javascript Mouseout Issue

Hi folks,

I’m trying to get my javascript function to enable mouseover and mouseout. I got the mouseover part to work, however, the mouseout function is not working.

The end goal of the function is that when the mouse is over any of the contents of the “Portfolio” button drop-down menu the red light blinks, but once the mouse leaves, the blinking is supposed to stop.

Here’s my Code Pen: https://codepen.io/IDCoder/pen/OWbXLw?editors=0010
And here’s my code:

`
var tabs = document.getElementsByClassName(“dropdown-tab”);
for(let i=0; i< tabs.length; i++){
tabs[i].addEventListener(“mouseover”, blinking);
}
for(let i=0; i< tabs.length; i++){
tabs[i].addEventListener(“mouseout”, blinking);
}
function blinking(){

var element = $(".red");
var shown = true;
setInterval(toggle, 300);

function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
}
`

How do I get the mouseout aspect of the function to work?
How do I tie in a clearInterval() function with mouseout? Thanks in advance for your help!

7 posts were merged into an existing topic: How to Enable Javascript Blinking Light for Hover

I went ahead and combined your posts for you since they were all still related to the original issue of enabling the blinking light for the dropdown.