html - :focus isn't working but :hover works fine

Question

我试图让只能使用 Tab 键的用户可以访问我的网站。我遇到的问题是，当我尝试使用 tab 键选择 float 的 div 时，不会触发 :focus in css；我不知道为什么它没有被触发。鼠标悬停很好用，我觉得这很奇怪。我希望有人能帮助我:)

http://jsfiddle.net/4fMex/

<a href="#">
<div >
<h3>lalala</h3>
<img alt="picture" src="http://boncia.co/wp-content/uploads/2013/12/landscape-47.jpg"/>
</div>
</a>


img{ 
width:300px;
}


div{
width:50%;
border: 3px solid black;
float:left;
}

div:hover , div:focus{
opacity:0.6;   
}

Answer 1

在您的具体情况下，您可以这样做:

a:focus div {
 opacity:0.6;
}

请注意，您的 a 应分配一些 tabindex 以使其可聚焦。

Demo.

更新:看起来给 div 一些 tabindex 也可以使其可聚焦。虽然我不确定这是否适用于跨浏览器。因此，您可以使用原始代码，并为 div 而不是 a 添加一些 tabindex。