elegant ie6 hover css solution

Question

I want a solution for tag:hover that is not working on ie6. My guess is it has to be done with javascript.

I found this patch: csshover3.htc (http://www.xs4all.nl/~peterned/csshover.html), I checked it's demo! and i didn't work on my ie6 browser!

There has to be an elegant way to solve this very BIG and basic problem, may be a jquery plugin.

Any lead is appriciated

Answer 1

There's Google's ie7-js, but I'm not sure if it addresses anything other than transparent-png issues.

Visibility inherit offers this alternative that directly addresses the mouseOver/:hover problem.

Answer 2

If you're talking about mouseover on non anchor tags, you could use jQuery to add an event handler to catch mouseover events.

Answer 3

Might not be applicable for your context, but you could always just make a point of having your a elements be given the hover effect. For example, in a navigational ul>li>a list, style the a elements with display:block and style them, rather than the lis.

Answer 4

Using jQuery you would be able to use the hover function (http://docs.jquery.com/Events/hover) to add a class on hover.

example:

$("li").hover(
  function () {
    $(this).addClass('ie6-hover');
  }, 
  function () {
    $(this).removeClass('ie6-hover');
  }
);

You could then make the class have the same properties.

li:hover, li.ie6-hover {
    text-decoration: underline;
}

Answer 5

A short jQuery Plugin does it for me

 IE6TableHover: function()
 {
  if(jQuery.browser.msie && /6.0/.test(navigator.userAgent))
  {
   $(this).hover(
     function(){
      $(this).addClass('jshover');
     }, function(){
      $(this).removeClass('jshover');
     });
  }
 }

required jQuery Version here 1.2.6 for 1.3.x you have to change the browser check.