使用 :focus 作为 :hover 替代键盘导航答案

【问题标题】：use :focus as a :hover replacement for keyboard navigation使用 :focus 作为 :hover 替代键盘导航
【发布时间】：2013-10-31 16:19:29
【问题描述】：

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 将不完全不透明。

【问题讨论】：

非常有趣.. 但我很确定opacity 只是不适用于:focus，而不是相反。根据我所知道的，您只能更改事件的一些属性，例如:active/:focus/:visited.. 我可能是错的.. 见jsfiddle.net/8G4bY ...编辑...看来好像opacity 在某些情况下确实有效.. jsfiddle.net/GcxMk
angular-deep-blur 有点相关。它检查焦点元素是否在指定的子树中，并针对该子树中的每个模糊事件集中执行代码。

标签： css hover accessibility

【解决方案1】：

要使 :focus 影响元素而不是链接和表单元素，您需要在 tabindex 属性中使用。当你把它放在每个元素上时，你可以为它分配 :focus pesudo 元素。

在您的示例中，您需要了解如果链接不透明度发生变化，不透明度也会保留在父 div 上。

你可以看到工作样本here。或使用 tabindex 的示例

<div tabindex="1">Touch the Div</div>

【讨论】：

感谢您的回答。我仍然希望回答我的问题的第二部分。
试着再解释一下你的第二部分
当悬停在一个元素上时，你也悬停在它的所有父元素上。这不是焦点的情况。有什么方法可以模拟焦点的悬停行为吗？

【解决方案2】：

这可以通过 focusin/focusout 事件在 JavaScript 中完成（它们就像 focus 和 blur 一样，只是它们会冒泡）。 Here 是个小提琴。

归结为这个函数：

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 选择器的规范草案，它可以完全满足这里的要求。

【讨论】：