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

问题

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.

回答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.

回答2:

While I understand the OP wanted to handle IE6 as well, I've posted this solution for anyone is not concerned with IE6 and who wants to allow keyboard navigation (focus rectangles still appear when tab is pressed) but hide the focus rectangle when the element is clicked (or enter key is pressed).

The .hide-focus-on-click is just a jQuery selector - replace it with whatever selector you need (e.g. "div#nav a" for all hyperlinks within )

CSS:

.no-focus-rectangle {
    outline: none;
}

jQuery:

$(document).ready(function() {
    $(".hide-focus-on-click").click(function(){
        $(this).addClass("no-focus-rectangle");
    }).blur(function(){
        $(this).removeClass("no-focus-rectangle");
    });
});

来源：https://stackoverflow.com/questions/1777935/how-to-remove-anchor-links-dotted-focus-outlines-only-for-mouse-events-but-not

标签

javascript

jquery

xhtml