IE6 hover state not reverting

Question

Demo http://people.mywot.com/dean/tour/ie6test.html

I have narrowed down this problem into the test case above. You'll spot it right away if you load it up in IE6.

The problem

When hovering over the anchor in IE6, all descendent elements which are meant to become visible become visible, but as soon as you hover out, all styling remains but the text disappears. This results in a "ghost box" and quite an interesting (but undesired effect).

I've searched for a few hours this morning to try and find out which IE6 bug this is, but I'm out of ideas.

P.S. Ignore the transparency of the PNG's. I just haven't included the pngfix on this demo.

Answer 1

Hover states in IE6 have some silly bugs unfortunately.

http://reference.sitepoint.com/css/pseudoclass-hover covers most of them which should allow you to experiment with what might be wrong.

EDIT: You may have to resort to javascript to overcome this one unfortunately.

Some commenters are forgetting that there are a number of clients (eg: UK local government) that still almost exclusively use IE6. Pity those of us who have to still ensure it is taken into consideration!