How to Enable Javascript Blinking Light for Hover

Hi folks,
I am trying to enable a javascript blinking light when hover or mouseover over drop-down content menu. How do I do this?

Here is my code so far:

dropdown-content.addEventListener(“mouseover”, function(){
var element = $(".glow-red");
var shown = true;
setInterval(toggle, 100);

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

Another suggestion to get it light up is using CSS
.name-of-dropdown:hover {
background: red;
}

If you prefer the javascript method, you can create a CSS class to add the light color in your moveover event listener function and remove the class in a mouseout event listerner to turn off the light color. So you’ll need two event listeners.

No, I can already get it to light up. I want it to blink. I’m using a javascript blink function. I need to get it to blink when i hover the contents of the drop-down menu.

What is your code???

I posted it on this post

Here is my code so far:

`
dropdown-content.addEventListener(“mouseover”, function(){
var element = $(".glow-red");
var shown = true;
setInterval(toggle, 100);

function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
`
What I’m trying to do is, when we hover over any of the drop-down menu contents, the red glow light will blink (the green light will still glow green, because the slide show animation will still be running). See screenshot here: https://s33.postimg.cc/ch6853myn/issues.jpg

setInterval(toggle, 100);

100ms is very fast to create the blink effect, its less than 0.5 sec. Try using 1000 or 2000, which is1 sec or 2 sec per interval.

That’s not the problem, though, I’m trying to tie the blinking function to when the mouse hovers over the drop-down menu contents…do you know how I can do that?

What is dropdown-content? are you adding the event listener to each tagindividual or to one whole tag

Hi @camperextraordinaire, here is a link to my Code Pen: https://codepen.io/IDCoder/pen/OWbXLw?editors=0010 …thanks for coming onboard! :slight_smile:

@thisiswhale, I sent you a screenshot showing exactly what I’m talking about. And “drop-down” content is the class for the div that provides the drop-down menu items.

When the mouse hovers over any of the drop-down menu items I want the red glow-button to flash. And yes, continuously. I already have that function already, I just want to tie it into a mouseover or hoverfor the drop-down menu items.

I want it to flash continuously. I have a working javascript function for that already. My problem is trying to bind it to a hover or mouseover for the drop-down menu items. That’s all.

I checked the console and you have an error with this
dropdown-content.addEventListener(“mouseover”, function(){

You haven’t define dropdown-content in JavaScript. Also, you have to use dropDownContent instead dropdown-content, it will give you an error.

1 Like

@thisiswhale would you mind doing a fork of my code?

I can run your code in codepen.

did you test your suggestions there to see if they’ll work?

I explained the error your website is having.
Again, dropdown-content.addEventListener(“mouseover”, function(){ is the error your menu items arent binding.
You haven’t told where you want to add your event listener because dropdown-content wasn’t defined in your code.

That’s why your menu items aren’t talking with your javascript code.

I hope that makes sense.

How do I fix that error? :frowning: :frowning: …I’m lost on that.
And I want to add the event-listener to the class, “dropdown-content”… see here (from html sheet): <div class="dropdown-content">

Similar how you did in line 5-11, that worked perfectly.

This is important var showcase = document.querySelector("figure");
You need to tell your code what piece of code in HTML you want to call.
In this case,

var dropDownContent = document.querySelector(".dropdown-content");

1 Like

Thanks for you time, I appreciate it alot!
This is my code now:

`var dropDownContent = document.querySelector(".dropdown-content");
dropdown-content.addEventListener(“mouseover”, function(){
var element = $(".glow-red");
var shown = true;
setInterval(toggle, 100);

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