This bug affects: IE7
background does not change on :hover
Tue Aug 11 19:50:22 2009
I have no idea how this bug was discovered considering the insane triggers that cause it. I got it from http://css.tests.free.fr/en/exemple46.php - kudos. If you ever run into this bug on a real website, I'll buy you a beer! Let's glance at the demo first:
Due to the nature of the bug, the demo is available on a separate page
<div><a href="#">Hover Me</a></div>
div { background-color: #000; } a { width: 100%; display: block; border: 1px solid #000; color: #ddd; } a:hover { background-color: #fff; color: #000; }
In IE7 the background on the link will not change to white on hover. This bug is so fragile that I may as well write a tutorial on how to produce it instead of how to fix it! Check it out: the non-hover state needs "layout", background-color (and not background can be used nor background-image can be used) on the :hover selector. The non-hover state needs to have no background set, border needs to be set and, *drum roll*, the bug only shows itself when the background-color on the :hover is set to pure white (i.e. #fff, #fffff or white). Pretty insane, huh? :)
Below are solutions for the above bug ordered by the solution type.
Tue Aug 11 20:54:32 2009
All of the affected
There are a billion fixes for this bug. I'll show just one:
Due to the nature of the bug, fixed demo is available on a separate page.
<div><a href="#">Hover Me</a></div>
div { background: #000; } a { width: 100%; display: block; border: 1px solid #000; color: #ddd; } a:hover { background: #fff; color: #000; }
The only thing I did is change background-color to background. Viola - bug is fixed. If this fix is not suitable for you, just read the triggers for the bug, you'll find tons of solutions (e.g. background the hover background to #fffffe that is akin to white or setting position: relative to the :hover state.
Fri Mar 30 16:22:36 2012
OMG. IE!! Why!?!?! This bug just had me frustrated for the past hour. The worst part is that an onhover background-color of #ffffff looks so innocent. Unfortunately, only after I figured out the problem could I adequately google for it and that's how I came across your write up.
Mon Jan 30 13:49:59 2012
I think I ran into the same issue as RussellUresti (a slight variation on this bug) in a non-public-facing site I'm working on today. I went with the #fffffe fix. Thank you for documenting this so I didn't have to spend the afternoon questioning my sanity.
Tue Oct 18 17:14:16 2011
Hey dude, try to add a border of 1 pixel, so it works :)
Wed Oct 12 16:34:00 2011
I just came across this as well in an internal application I'm working on. My situation didn't fit exactly as you described, but the bug is specifically on the white background during hover.
My situation is that a few of the anchor tag's parents have zoom: 1 to fix the layout. I noticed when I removed zoom the hover worked fine, but this (obviously) broke the layout. When zoom was added in again, the layout was fixed but hover didn't work.
For me, changing the background property from #fff to #fffffe worked fine. I should note that I see the bug even with using the background property, not just the background-color property.
I'm still trying to figure out a way to fix this that doesn't require changing the color to off-white, I'll post again if I find anything.
Tue Aug 30 02:48:39 2011
You owe me a beer....and I owe you six in return! :) Thanks for this!
Thu Jun 16 21:35:06 2011
Thanks for the beer.
I experienced this on IE8 while testing my layout.
I wish so much that IE would just roll over and die.
Tue Nov 9 12:28:52 2010
Thank God you posted this. This arose when I was setting up a navigation menu with an unordered list full of left-floated, fixed-width list items containing block-displayed anchor links that (were supposed to) change their background color to White on hover. I caught it when doing my cross-browser compatibility debug and can only say... of all the unlikely--
Mon Nov 8 09:34:53 2010
Free beer here too, i seem to have stumbled onto this as well . ill post a link when its live
Thu Aug 5 10:11:47 2010
I'd like to claim my free beer, found this bug while working on an intranet application! Very perplexing until I read this!
thanks,
A
Thu Nov 5 08:24:38 2009
As long as the red component of the background color is not FF, the bug will not appear. Use #feffff for white will work, for example. #fffffe will not work.
If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.
Alternatively, purchase my book: 
