css 焦点在 safari 和 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5832436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css focus not working in safari and chrome
提问by user687414
I got one strange problem which I never got before. Please see this code:
我遇到了一个以前从未遇到过的奇怪问题。请看这段代码：
The css:
css：
#btn{
margin-left:150px;
padding:10px;
display:block;
}
#btn a{
padding:5px 20px;
background:green;
color:#FFF;
text-decoration:none;
outline:none;
}
#btn a:hover{
background:#933;
}
#btn a:focus, #btn a:active{
background:#CF0;
color:#000;
}
}
Here the HTML
这里的 HTML
<div id="btn">
<a href="#">Click here</a>
</div>
The focusand activecss working well in firefox, but not in the chrome and safari.
的焦点和活跃的CSS在Firefox中运作良好，但无法在Chrome和Safari。
回答by shobhonk
Yeah seems like little problem with focus in webkit. Not really a bug. Easily fixable in html. Just use tabindex.
是的，webkit 中的焦点似乎没什么问题。不是真正的错误。很容易在 html 中修复。只需使用tabindex。
<a href="#" class="hide" tabindex="1">[hide]</a>
<a href="#" class="show" tabindex="2">[show]</a>
ta da ...
他达...
回答by user1040252
This is also the case for Webkit based 'focus' events, it doesn't take. The fix is to put a tabindex="0" attribute on the A and then it receives the focus event. You might also want to have at least a "#" as the href just in case.
这也是基于 Webkit 的“焦点”事件的情况，不需要。解决方法是在 A 上放置一个 tabindex="0" 属性，然后它接收焦点事件。您可能还希望至少有一个“#”作为 href 以防万一。
回答by calofanas
回答by Mel
Use tabindex="0" to make an element focusable if it is not already. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindexfor more information about tabindex.
使用 tabindex="0" 使元素可聚焦（如果它还不是）。有关 tabindex 的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex。
Setting tabindex to -1 makes it unfocusable. Setting tabindex to a positive integer is not recommended unless you're trying to explicitly set the tab order, as it can create accessibility issues.
将 tabindex 设置为 -1 使其无法聚焦。除非您尝试显式设置 Tab 键顺序，否则不建议将 tabindex 设置为正整数，因为它会造成可访问性问题。
For more information about tabindex and accessibility, see https://webaim.org/techniques/keyboard/tabindex.
有关 tabindex 和可访问性的更多信息，请参阅https://webaim.org/techniques/keyboard/tabindex。
回答by stack collision with heap
The solution posted by user1040252 did the trick for me.
user1040252 发布的解决方案对我有用。
I have a div with images that sets an image in a span tag to visible on a click. Firefox ignores the classname:focus in my CSS file.
我有一个带有图像的 div，可以将 span 标签中的图像设置为在单击时可见。Firefox 忽略了我的 CSS 文件中的 classname:focus。
<div class="thumbnail_frame">
<img src="pictures\figures\thumbs\image_1.JPG"/>
<span>
<img src="pictures\figures\image_1.JPG"/>
</span>
</div>
My CSS (part of it):
我的 CSS（它的一部分）：
.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
visibility: hidden;
position: fixed;
top: 20px;
left: 20px
}
But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here: explanation: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htmtry it: http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm
但是，这只有在使用Internet Explorer 9，Firefox的工作保持12也忽略了焦点在其他简单的例子，像在这里找到：解释： http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm试试吧： HTTP：// de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm
But adding tabindex="0", as in
但是添加tabindex =“0”，如
<div tabindex="0" class="thumbnail_frame">
<img src="pictures\figures\thumbs\image_1.JPG"/>
<span>
<img src="pictures\figures\image_1.JPG"/>
</span>
</div>
works like a charm. One click opens the hidden span, and the second one closes it very neatly.
奇迹般有效。一键打开隐藏的跨度，第二次非常整齐地关闭它。
回答by Ismail
You should know that the pseudo class :focus doesn't go with A. The A tag has 4 pseudo classes : :link, :hover, :active, :visited
你应该知道伪类 :focus 不与 A 搭配。 A 标签有 4 个伪类： :link, :hover, :active, :visited
