How to remove anchor link's dotted focus outlines only for mouse events but not for keyboard tabbed navigation?

Question

For anchor links i want to removes the dotted focus outlines for mouse events, but want to display them when for keyboard tabbed navigation.? Is there any javascript, jquery method?

Method should be compatible all A-grade browsers. including IE6.

Although all pure css methods to remove dotted lines do not works in IE 6.

But remember i want to remove dotted focus outlines only for mouse events, but want to display them when user use keyboard tabbed navigation.

Answer 1

Try to use jQuery/Javascript to apply style when mouseover. That way outline:none; will must likely to apply when it's a mouse click.

CSS:

.foo.bar:focus {
    outline: none;
}

jQuery:

$(document).ready(function()
{
    $(".foo").mouseover(function(){
            $(this).toggleClass("bar");
        }).mouseout(function(){
            $(this).toggleClass("bar");
    });
});

Unfortunately, this brings another problem: IE6 compaitability with multiple classes. This can be solved by using double div techniques to apply style with multiple classes.