：焦点不起作用但是：悬停工作正常

Question

我正在尝试为只能使用Tab键的用户访问我的网站。我遇到的问题是，当我尝试使用tab键选择我的浮动div时，不会触发：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看起来也让它可以集中精力。虽然我不确定这是否适用于跨浏览器。因此，您可以使用原始代码，只需为tabindex而不是div添加一些a。