How to Enable Javascript Blinking Light for Hover

How to Enable Javascript Blinking Light for Hover
0.0 0

#1

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;
}
}
});
`


Javascript Mouseout Issue
Trying to Get Lights On My Button To Turn On
#2

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.


#3

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.


#4

What is your code???


#5

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


#6

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.


#7

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?


#8

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


#9

Please provide a url to all your code (HTML, CSS, JavaScript), so we can better help you. Codepen and JSFiddle are good for this.


#10

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


#11

@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.


#12

So when the mouse hovers over the drop-down menu contents, what exactly do you want to blink? How long do you want it to blink? Continuously?


#13

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.


#14

You want it to flash once, twice, or continuously? How fast do you want it to flash? You have to be very detailed when you ask for help on the forum, so we completely understand what you want to do.


#15

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.


#16

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.


#17

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


#18

I can run your code in codepen.


#19

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


#20

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.