PDA

View Full Version : :hover pseudo-selector not working with IE6/7/8



garethccc
Apr 16th, 2010, 01:08 PM
Hi all,

This is my first of hopefully many posts in this wonderful forum :-)

I'm stumped by the behavior of a :hover pseudo-selector I've applied to a <p> element as follows:



#navisubServ p:hover { background-color: #BDCBD7;}


It's a rollover affect I'm applying in the 'navisubServ' div. In webkit and gecko based browsers it's rendering as desired but not in any of the IE browsers. I was not expecting it to work in IE6 but it's not working in 7 or 8 either!

It was my understanding that the :hover pseudo-selector is supported for the <p> element, and most others (not just the <a> element), in IE 7 & 8 but it seems, at least with my implementation, this isn't the case.

I've even tried loading Dean Edwards’ IE9.js (http://code.google.com/p/ie7-js/) (and IE7-squish) compatibility scripts to no avail.

My DTD is XHTML 1.0 Strict.

Any ideas?!

Thanks a bunch!

Gareth

drhowarddrfine
Apr 16th, 2010, 01:24 PM
:hover only works on <a> in IE6. What you show should work in IE but without the complete markup or, preferably, a link, anything would be a wild guess.

garethccc
Apr 16th, 2010, 01:29 PM
SOLVED!

Ok, it seems that I've already solved the issue right after I posted to the forum (sorry! I swear I did my research before posting!)

The issue was actually tied to some javascript I was applying to the div to achieve a fade in/out and transparency effect. The script works flawlessly with mozilla/webkit but not IE!

I'll be sure to post an example page next time, sorry guys :-)

gareth

drhowarddrfine
Apr 16th, 2010, 05:11 PM
works flawlessly with mozilla/webkit but not IE!


Nothing unusual there.