CSS 跨浏览器点击时轮廓抑制

发布于 2024-11-26 06:40:29 字数 1087 浏览 3 评论 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-Clicked-Links

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

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

原文

I have a menu structure that looks like this:

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

I've been trying for many many days to find a cross-browser solution to suppress outline style on click while keeping it enabled with tab navigation.

None of the solutions written on the following pages are working for me:
http://people.opera.com/patrickl/experiments/keyboard/test
http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

Does anyone know how to fix this issue? Any solution (CSS only, JS, CSS+JS) is welcome.
Many thanks in advance!

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我的影子我的梦 2024-12-03 06:40:29

您必须使用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 或 a.mouse 中定义所需的样式 CSS 课程。

You have to use JavaScript, so that you can differentiate between keyboard and mouse event triggers.

Part of the answer for your question was already posted in Differentiate between focus event triggered by keyboard/mouse

And here is the complete solution using the jQuery javascript framework:

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

Afterwards just define the desired style in the a.keyboard or a.mouse CSS classes.

回复收藏 0 原文