Question

184

Javascript addEventListener - using to create a mouseover effect?

rated 0 times [ 189] [ 5] / answers: 1 / hits: 126795 / 13 Years ago, tue, november 29, 2011, 12:00:00

I have a div with an id of button. I am trying to change its background to become blue when I hover (without using the CSS hover selector).

var item = document.getElementById(button);

item.addEventListener(mouseover, func, false);



function func()

{  

   var item = document.getElementById(button);

   item.setAttribute(style, background-color:blue;)

}

This, however, only sets the color of the item to blue when I hover, but does not reset it to white after I move mouse away. How can I correct this? (btw, mouseenter and mouseleave do not work with this seemingly).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sandy

Add To Favorites

Follow

Total Points: 59

Total Questions: 98

Total Answers: 98

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

answered 13 Years ago longd · Accepted Answer

You will need to setup a similar event to handle mouseout. Inside the mouseout event function, you can change the color back to the original color.

var item = document.getElementById(button);

item.addEventListener(mouseover, func, false);

item.addEventListener(mouseout, func1, false);



function func()

{  // not needed since item is already global, 

   // I am assuming this is here just because it's sample code?

   // var item = document.getElementById(button); 

   item.setAttribute(style, background-color:blue;)

}



function func1()

{  

   item.setAttribute(style, background-color:green;)

}