Topic: css a:hover to change background (Page 1 of 1)

Using:

<style type="text/css">
#switcher a img {
background-color: #999999;
}

#switcher a:hover img {
background-color: #000000;
}
</style>


<div id="switcher"><a href="#"><img src="blah.gif" width="200" height="200" border="0" alt="" /></a></div>


The first one works, but the a:hover doesn't. What am I missing?

It works in Mozilla, just not IE. IE does tend to have poor support for pseudoclasses affecting anything other than a link itself.

Unless I'm overlooking something simple, your best bet is to get rid of the anchor tag middleman, apply the :hover style to the image itself, and use a script to acheive the effect in IE.

Hmmm...ok

I looked at http://www.fastcompany.com/ and the rollover effect for the little buttons in the upper right is what I'm after. That works in IE 6.0 SP1 fine...... I took that code, and plugged it in, and I've got this problem.....I'll look around.

Thanks!

Oh, you're right. Hmm.

Weird... I'm finding that if I hold down the mouse button (in your example), without releasing, I get the on-hover color.

I'll keep looking into this...

just curious as to wether or not this has been figured out....................

Later,

C:\


~Binary is best~

Pugzly: To get your style working in IE and Mz, you must remove the img tag name in the CSS, just like that :

<style type="text/css">

#switcher a {

background-color: #999999;

}



#switcher a:hover {

background-color: #000000;

}

</style>

Honestly I'm not exactly sure to know why it works than way and not yours. IE only supports the :hover pseudo class on the a tags but it also supports descendant selectors so your CSS should have worked...well, it must be another of IE's misteries.

Anyway, hope that helps.

Mathieu "POÏ" HENRI

Ah. That seems to work.....interesting.

Thanks for the help!