Categories
CSS & HTML Tips

CSS selector:hover Hack for IE6

IE 6 and lower versions of IE only implemented :hover for tag a. As per CSS 2.1 specification, all HTML tags / elements have :hover state so that when mouse pointer hovers over, different styles can be applied to them.

li:hover is one of the frequent reasons why you need this hack. First, you have to download the .htc file.

and implement it in your CSS file like this:

body {
	behavior:url("/styles/csshover3.htc");
}

supposing you have put it in styles directory which is under the document root of your site.

Now you can freely select li:hover and other elements’ hover state and style ‘em!

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

30 replies on “CSS selector:hover Hack for IE6”

@Yang Yang

Hum I don’t know… when I’am looking to my stats tool more than 20% of all visitors are using IE 6 🙁 I think IE 6 will die (hopefully) after the new Windows release. God hope it is better then Vista and beats XP (with IE 6 Standard) from the market!

Not working for me at all – it takes no efect.. Have checked file paths, it definately is seeing the htc file.. any ideas?

@Michelle,
One of my friends was trying this out and also saw no effect, at last we were able to trouble shoot the problem as the behavior URL must be relative to the HTML file you are serving rater than the CSS. So, if you are not using an absolute path, make sure the path to the HTC file is relatively correct against the HTML file, not the CSS file where this line of code is contained.

Hope it helps. Let me know.

I’m glad I read down to the comments about this – it wasn’t working until I pointed it relative to the HTML files. I suggest including this direction in the original tutorial. And thank you so much for the solution!

Cool trick.

BTW – as of August, 2010, the marketshare using IE6 on my web site is 5.7% and SHRINKING. The marketshare with JavaScript DISABLED is 7.1% and GROWING.

Depending on what you are using the :hover for, you may wish to consider abandoning the IE6 support (following Google, YouTube, and several other companys’ leads). If you are only creating hover effects for buttons, don’t bother with this solution. But if your site’s usability depends on the :hover this solution may be necessary.

I too am having problems.

I have created a file called demo.htm which has a hover state over a series of LIs. The purpose is for a dropdown menu I am working on.

I also have a demo.css which contains the behavior:url line.

Finally, I have the csshover3.htc file

All files reside in the sam directory, and the css file refers simply to:

behavior:url(“csshover3.htc”);

As I said, all these files are in a single folder on my computer. If I access demo.htm using a browser, it works fine.

However, if I upload the folder to my server, and try to access the demo.htm file, then the hover doesn’t work.

Any ideas?

@yang:
i have one query regarding the usage of the CSS property –
behavior:url(“csshover3.htc”);
can we use this property in a CSS file following CSS2 standards and not CSS3?
If not then, is there any ways to solve the same issue using a CSS file with CSS2 standards??

Scrolling down and reading the previous comments I am envious, for the most part, of those who have been able to get this solution working 🙁

@Yang – As some who have mentioned before me, I have also downloaded the .htc and referenced it in my css with the correct path (relative to the html) and still an unable to hover over any of my sub menu elements. Any insights would be greatly appreciated.

Comments are closed.