IE6 :hover and :focus fix

This tutorial explains how you can make Internet Explorer 6 recognize when you hover or focus HTML elements.

When you need a CSS selector to use a certain style on hover (mouseover) or on focus in IE6, you can add the following code to the file templates/your_template/lib/js/ie6fix.js. If you need to fix more than one selector you can separate them with commas. After the selectors you can set a class you want them to have in IE6 for the time they are hovered. By default, these classes are called "hovered" and "focused" respectively.

Fix for :hover

This is an example for the selectors div#menu li. In IE6, for the time they are hovered JavaScript injects the class "hovered":

addHover('div#menu li, #middle ul.menu li', 'mouseover');

You could now set CSS styles for these selectors like this:

div#menu li.hovered { color: #ffffff }

If needed you can also set a different CSS class than "hovered":

addHover('div#menu li, #middle ul.menu li', 'myclass');

Now you could select the CSS class "myclass".

Fix for :focus

This is an example for the selector form input. In IE6, a JavaScript injects the class "focused" for the time the input field is focused.

addFocus('form input');

As we didn't define a custom class, it will be called "focused" and you could now set CSS styles for this selectors like this:

form input.focused { border: 1px solid #000000; }

You can also set your own CSS class like you can do for :hover. Just take a look at the example above.