onmouseover for element li doesn't work

Question

i have the following simple code, but it doesn,t work

<ul>
  <li id="one" onmouseover="this.style.background-color='white';">
    <a href="#">home</a>
  </li>
</ul>

could you tell me why. thanks

edit:

and how can i also change the color of a tag, onmouseover of li

Answer 1

Convert hyphens to camelCase when changing properties of the style object in JS.

backgroundColor

However, you are trying to solve this problem in the wrong way.

If you really wanted to style the list item on hover, then you probably should be using li:hover in your stylesheet. The only downside is that this won't work in IE 6 (although it is just a cosmetic effect on an ancient browser that is increasingly falling in the "Not supported" box).

That said, having a hover effect shouts "You can click now!" at the user — but only the link portion of the list item will do anything when clicked. This means that you should style the a element, not the li … but style it to fill the list item (and this will work in IE6).

Listamatic has many examples.

Answer 2

it'll be onmouseover="this.style.backgroundColor='white';"

Answer 3

Why not use pure CSS for this one?

li:hover {
    background-color: #ffffff;
}

Otherwise use gX's and David Dorward's suggestion.

Answer 4

You can also use whatever:hover or a js framework (like jQuery). whatever:hover has only 3kb or so, so I guess is worth to load it :)

As a side note, I think you should take a look at this list to see how CSS styles are converted to JS.