IE6 Hover Fix

The :hover pseudo-class is a very important CSS function. It can be used to highlight text, table-cells, divs, images and much more. Without it websites would be very bland and boring.
Unfortunately, there is an IE6 hover problem which greatly affects how we can use the :hover pseudo class.

All modern browsers support the hover pseudo-class properly and it functions properly on any html element, however in IE6 it can only be applied to <a> links that contain the href attribute. This problem forces us to either change what we were thinking of doing, or find another way to complete it. Luckily we can fix this terrible IE6 hover problem using the almighty jQuery.
All we need to do is add a simple jQuery function that adds a class to our target element on hover and removes it when we mouse off.

The jQuery

$(document).ready(function(){ 

	//Highlight the box
	$("div.box").hover(function() ;{ 
	$(this).toggleClass("active");
	});

});

What we are saying is:

  • When the DOM is ready
  • And you hover over div.box
  • Toggle the class named .active

So when the document has loaded, and you hover over div.box, it then adds the class of .active to the list of classes it already has (if any at all). This is a very straight forward, helpful and easy to understand bit of jQuery that completely eliminates the IE6 hover issues. We would have to give the .active class CSS properties, otherwise our jQuery is adding a class that won’t affect the element due to lack of CSS properties.

The CSS

.box	{ background: black; height: 200px; width: 200px; }
.active { background: white; }

There we go. If you have to implement this code, it would work exactly like the IE6 hover pseudo class should work and how all modern browsers already work.
I think this is a very simple, effective and elegant way of dealing with the IE6 hover problem. If you are new to jQuery, then this is probably a good place to start learning it since it is very easy to understand what’s going on.

Keep in mind

You could run into some CSS specificity conflicts. This occurs if an element has two or more CSS rules of equal specificity value that point towards it. Such as:

<div id="content">
	<div class="example problem"></div>
</div>
.example{ background: green; height: 500px; width: 300px; }
.problem{ background: black; height: 600px; width: 700px; }

The class that is further in the CSS document will get the priority, so the .problem class would override the .example class.
But you could easily fix it by raising the specificity value of the class you would like to dominate, for example:

#content .example{ background: green; height: 500px; width: 300px; }
.problem{ background: black; height: 600px; width: 700px; }

In this scenario the box would take the properties of the class .example over the .problem properties.

Any questions or comments?