css - 使用 :focus as a :hover replacement for keyboard navigation

Question

WCAG 2.0建议在链接元素上使用 :hover 时也使用 :focus 以支持键盘导航。这适用于链接元素，但两者之间存在一些差异。

• 任何元素都可以有 :hover 状态，但只有极少数元素可以被聚焦
• 将鼠标悬停在一个元素上时，您也会将鼠标悬停在其所有父元素上。焦点不是这种情况

这个问题完全是关于 css 的。有没有办法模拟 :hover (如上所述)的键盘导航行为？还是有什么充分的理由让人不想那样做？

为了更清楚这里是一个例子:

html:

<div id="box">
    foo bar
    <a href="#">click me</a>
</div>

CSS:

#box {
    opacity: 0.3;
}
#box:hover {
    opacity: 1;
}
#box a:focus {
    opacity: 1;
}

使用鼠标时，我会先将鼠标悬停在链接元素上，然后再使用它。由于 :hover 状态向上传播，#box 将完全不透明。

当使用键盘时，我会在使用它之前聚焦链接元素。由于 :focus 状态不会向上传播，#box 将不会完全不透明。

Answer 1

这可以在 JavaScript 中使用 focusin 完成/focusout事件(它们就像 focus 和 blur 除了冒泡)。 Here是一把 fiddle 。

归结为这个函数:

var deepFocus = function(element, cls) {
    cls = cls || 'deep-focus';

    element
        .on('focusin', function() {
            element.addClass(cls);
        })
        .on('focusout', function() {
            var value = !!element.find(':focus').length;
            element.toggleClass(cls, value);
        });
};

更新:有一个规范草案包含 :focus-within选择器将完全满足这里的要求。