8

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

  • 任何元素都可以具有: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，因此不会完全不透明。

4

2 回答 2

1

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

它归结为这个功能：

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选择器将完全执行此处所需的操作。

于 2015-05-22T07:33:33.243 回答
0

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

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

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

<div tabindex="1">Touch the Div</div>
于 2013-12-24T14:29:06.343 回答