0

我有一个看起来像这样的菜单结构：

HTML：

<li>
  <a href="#page">
    <b>Recover Account</b>
  </a>
</li>

CSS：

#nav ul li a
{
  color: #889DBF;
  display: block;
  line-height: 22px;
  padding-left: 20px;
  text-decoration: none;
}

#nav ul li a b
{
  display: block;
  padding-right: 21px;
}

#nav ul li.current a
{
  background: url('/images/nav-left.png') no-repeat;
  color: #111B35;
}

#nav ul li.current a b
{
  background: url('/images/nav-right.png') no-repeat 100% 0;
  color: #111B35;
}

很多天以来，我一直在尝试寻找一种跨浏览器解决方案来抑制单击时的轮廓样式，同时通过选项卡导航保持启用它。

以下页面上写的解决方案都不适合我： http: //people.opera.com/patrickl/experiments/keyboard/test http://haslayout.net/css-tuts/Removing-Dotted-Border-on -点击链接

有谁知道如何解决这个问题？欢迎任何解决方案（仅限 CSS、JS、CSS+JS）。提前谢谢了！

[TL;DR]
Outline On Click -> DISABLED
Outline On Tab Navigation -> ENABLED
Any cross-browser solution? Thanks!
4

2 回答 2

1

您必须使用JavaScript，以便您可以区分键盘和鼠标事件触发器。

您的问题的部分答案已发布在区分键盘/鼠标触发的焦点事件中

这是使用jQuery javascript 框架的完整解决方案：

var isClick;
$(document).bind('click', function() { isClick = true; })
           .bind('keypress', function() { isClick = false; })
           ;
var userInterestHandlers = {
     on: function (e) {
        var $self = $(this);
        var classname =isClick ? 'mouse' : 'keyboard';
        $self.addClass(classname);
    }
    off: function (e) {
        var $self = $(this);
        $self.removeClass('mouse keyboard');
    }
}

$('a').bind ('focus active', userInterestHandlers.on);
$('a').bind ('blur', userInterestHandlers.off);

a.keyboard之后只需在ora.mouse CSS类中定义所需的样式。

于 2011-07-24T11:01:34.400 回答
1

CSS：

a:active {
    outline:0 !important;
}
于 2011-07-24T03:58:03.680 回答