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!