elegant ie6 hover css solution

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 checke开发者_JS百科d 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

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;
}

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.

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

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.

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.