IE a:hover bug

Style not turning back to normal once pointer leaves

[DonnChadh]

I have a bit of html that looks like this

 <div id="activity_nav"> 
 <h2><span></span>Activities</h2> 
 <ul> 
 <li><h3><a href="activity1.htm"><span>Activity 1</span></a></h3></li> 
 <li><h3><a href="activity2.htm"><span>Activity 2</span></a></h3></li> 
 </ul> 
 </div> <!-- activity_list --> 

The css is a variation on the FIR image replacement technique, using a span within the anchor to allow me to change the image so that there is one background image in the span normally and another on hover.

Now in FF and Opera this works fine, but in IE the hover isn't turning back to normal once I move the mouse away.
Instead it remains with the hover styling until either the window looses and regains focus, or I scroll up and down a bit, so it's like it isn't refreshing that part of the page right away.

#activity_nav h3 span { 
position: absolute; 
width: 100%; 
height: 100%; 
padding: 0 0 0 12px; 
cursor: pointer; 
background: url(../images/orange-back.jpg) no-repeat top left; 
} 

#activity_nav h3 {  
width: 193px; 
font-size: 1.0em; 
height: 17px;  
position: relative; 
margin: 0; 
} 

#activity_nav a:link, #activity_nav a:visited, #activity_nav a:active { 
text-decoration: none; 
color: #FFF; 
} 

#activity_nav a:hover { 
text-decoration: none;  
color: #F00; /* 
color: #E7F1F8; */ 
} 

#activity_nav h3 a:link span, #activity_nav h3 a:visited span, #activity_nav h3 a:active span { 
background: url(../images/orange-back.jpg) no-repeat top left; 
}  

#activity_nav h3 a:hover span { 
background: url(../images/blue-back.jpg) no-repeat top left; 
} 

I've run out of ideas on things to change to try and get it working and was hoping someone on here might have an idea, since I've been unable to find any posts directly relating to this sort of problem

[createErrorMsg]

DonnChadh, welcome to WebmasterWorld!

IE has a minor bug that requires a previous a:hover effect that changes the background property on the anchor in order to then change properties on an element nested within the anchor.

In other words, to apply a hover effect like this...

#activity_nav a:hover span{/*styles*/}

...requires something like this...

#activity_nav a:hover{background:transparent;}

...earlier in the stylesheet. Add the above line to your stylesheet at some point before the :hover call on the a span selector.

cEM

[DonnChadh]

Thanks, that sorted it