Использование: фокус как замена при наведении на клавиатуру

Question

WCAG 2.0 рекомендует также использовать :focus когда :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 не будет полностью непрозрачным.

Answer 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 селектор, который бы точно делал то, что требуется здесь.

Answer 2

С момента первоначального вопроса прошло много времени. Сегодня у нас:focus-withinкоторый должен хорошо работать для таких случаев, как этот:

      #box {
    opacity: 0.3;
}
#box:hover,
#box:focus-within {
    opacity: 1;
}

Answer 3

Для создания эффекта фокуса на элементах, а не на ссылках и элементах формы, которые необходимо использовать в атрибутах tabindex когда вы помещаете его на каждый элемент, вы можете назначить ему элемент:focus pesudo.

в вашем примере вы должны понимать, что непрозрачность остается в родительском div также в случае изменения непрозрачности ссылки.

Вы можете увидеть рабочий образец здесь. или образец для использования tabindex

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