Question

点击链接时我需要隐藏焦点轮廓。但是当我用tabindex滑动链接时，我还需要显示它。有些网站使用任何特定的解决方法来执行此操作。这似乎是dafault行为。但在我的网站上，当我点击一个链接时，它也显示了大纲。只有当我使用tabindex键滑动链接时，如何才能显示轮廓？提前致谢。赫尔穆特

Answer 1

如果选项卡行为是调整CSS outline属性时需要检测的具体内容，我不相信CSS可以从以下状态确定输入设备类型：focus或：active。

相反，您可以使用CSS隐藏页面上所有元素的轮廓：

a:focus, a:active {
  outline:0;
}
a.tabbed {
  outline:1px solid red;
}

然后，您将使用JavaScript来调整使用Tab键获得焦点的某些元素的轮廓。

document.addEventListener('keyup', function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var el = document.activeElement;

    if (code == 9 && el.tagName == 'A') {
        el.className = "tabbed";
    }
}, true);

我添加了一个简单示例：http://codepen.io/anon/pen/aljsu

单击时隐藏轮廓焦点链接

1 个答案: