Question

I am trying to create a ‘hover’ effect using JavaScript only. I know this can be accomplished with css, but I am new to javascript and I am trying to get practice with the onmouseover event. Most of my code works below, except the onmouseover Event. What I am trying to do is change the background color of every row in a table that has the class ‘striped’, on hover. Then change it back to the original background color onmouseout.

                    //Code below not working 
                    rows[i].onmouseover.style.backgroundColor = 'green';

I also tried:

rows[i].onmouseover.className+='addBg';

which didn’t work.

Answer 1

change

rows[i].onmouseover.style.backgroundColor = 'green';

to

rows[i].onmouseover = function() {
    this.style.backgroundColor = 'green';
}