:hover in IE

Shouldn’t that be
#sidebar ul li a:hover { ?

No, by having a before the li it makes the entire li element a link rather than just the text it’s self.
Also putting the hover selector on the li makes it so that the li is the trigger for the effect not the text of the link.

But IE doesn’t hover anything else than links…

ahhhh…. well this would be a good reason for not doing it.
Is there a way i could get it to change the background color of a parent element? Its sad how IE likes to do its own thing.

Ie doesn’t recognize the :hover pseudoclass on anything but anchor links. You need to have a javascript in the head of your document to force IE to allow :hover over items like “li” tags.

Son of Suckerfish people have a really good one that works well:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Check out that third line:
document.getElementById("nav").getElementsByTagName("LI");

Where it says “nav” you need to replace that with the id name where your li tags are. Where it says “LI”, you can leave it, or change it to “P” or whatever else you want to have hovering capabilities (but you’re using “LI”, so leave it as is.) Just don’t forget to change that “nav” to your div or ul id name (in your case, I think it’s “sidebar”).

EDIT: Oh yeah, I almost forgot. in your stylesheet, you need to add this:

#sidebar ul li:hover a,
#sidebar ul li.sfhover a{
background-color:#ECEDEB;
}

nice one m8
Thanks a ton!

I don’t like javascript so I usually am enlarging anchor-tags by setting the width and height, perhaps even display:inline-block depending on what I need. Then i just leave the li’s style blank and set it to the a.
You can do awesome (and still IE compatible) things with that since the clickable area is enlarged, too.

oh wow… tons of great tips!!! WOOOOO GO TEAM!