Change background of UL for each LI hover?

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

IE(4 through 6)/Win only support :hover on <a> elements.
Three ways to simulate :hover in IE5-6/Win:
Dean Edward's "IE7" patch for IE5-6
whatever:hover
http://www.htmldog.com/articles/suckerfish/

Thanks for the reply, Kravvitz.

"UL:Hover" would change when one hovered over the UL, though, no?

How would that vary it for each LI hover?

:)Ben

You didn't say that you wanted to use a different color for each <li>.

You would need to use JavaScript.

It would be better to not use inline events, however, for the purposes of providing you with an example, I will use them here.

If your CSS stylesheet predefined a background color, your mouseout will set it to null... do'nt forget to put an appropriate value in there if you want your UL to have a background when someone mouse is elsewhere on the page.

It's fairly obvious, but I had to point it out.

Yeah, was afraid I'd have to use JS. Was hoping there was a way to do it with just CSS, but oh well. Thanks for the responses.

Ben

CSS3 introduces some interesting pseudo-classes as far as :first-child, :last-child, or my favourite, :nth-child(even)... but alas, no sign of :parent... I can't help but think it would destroy the idea of "Cascading"