:对焦不起作用悬停效果

Question

我做了这个悬停效果：

https://jsfiddle.net/fwgh7bca/

HTML 和 CSS

nav:hover ul li {
opacity: 0.4;
}
nav ul li:hover {
opacity: 1;
}
nav ul li {
line-height: 1.5;
}
body {
margin: 5rem;
}

<nav>
<ul>
<li><a href="#">Item Number 1</a></li>
<li><a href="#">Item Number 2</a></li>
<li><a href="#">Item Number 3</a></li>
<li><a href="#">Item Number 4</a></li>
</ul>
</nav>

我希望在链接上按 Tab 键时应用效果。我尝试添加这个：

nav:focus-within ul li{
opacity: 0.4;
}
nav ul li:focus{
opacity: 1;
}

但是它不起作用，我怎样才能让它工作？提前感谢！

Answer 1

我认为你应该使用 ：focus 作为a元素

nav:hover ul li{
opacity: 0.4;
}
nav ul li:hover{
opacity: 1; 
}
nav ul li{
line-height: 1.5;
}
body{
margin: 5rem;
}
nav:focus-within ul li a{
opacity: 0.4;
color: yellow;
}
nav ul li a:focus{
opacity: 1;
color: red;
}

<nav>
<ul>
<li><a href="#">Item Number 1</a></li>
<li><a href="#">Item Number 2</a></li>
<li><a href="#">Item Number 3</a></li>
<li><a href="#">Item Number 4</a></li>
</ul>
</nav>