如何删除仅针对鼠标事件而不针对键盘选项卡式导航的锚点的虚线焦点轮廓? [英] How to remove anchor link's dotted focus outlines only for mouse events but not for keyboard tabbed navigation?

问题描述

对于锚链接，我想删除鼠标事件的虚线焦点轮廓，但是要在使用键盘选项卡式导航时显示它们.有没有JavaScript，jquery方法?

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?

方法应与所有A级浏览器兼容.包括IE6.

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

尽管所有用于删除虚线的纯CSS方法在IE 6中均不起作用.

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.

推荐答案

尝试在鼠标悬停时使用jQuery/Javascript应用样式.这样，outline:none;将在鼠标单击时必须适用.

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

不幸的是，这带来了另一个问题:IE6与多个类的兼容性.这可以通过使用double div技术将样式应用于多个类来解决.

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.

这篇关于如何删除仅针对鼠标事件而不针对键盘选项卡式导航的锚点的虚线焦点轮廓?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！