use :focus as a :hover replacement for keyboard navigation

Question

WCAG 2.0 recommends to also use :focus when :hover is used on link elements to support keyboard navigation. This works well for link elements, but there are a couple of differences between the two.

• any element can have the :hover state while only very few can be focused
• when hovering over an element, you also hover over all of its parent elements. This is not the case with focus

This question is strictly about css. Is there a way to simulate the behavior of :hover (as described above) for keyboard navigation? Or are there any strong reasons why one would not want that?

To make it more clear here is an example:

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;
}

When using a mouse I will hover over the link element before using it. Since the :hover state propagates upwards #box will be fully opaque.

When using a keyboard I will focus the link element before using it. Since the :focus state does not propagate upwards #box will not be fully opaque.

Answer 1

A lot of time has past since the original question. Today we have :focus-within which should work nicely for cases like this one:

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