Chrome:无法获取:焦点CSS应用于锚点

Question

我正在努力尝试将一些CSS用于:锚点上的焦点状态

a:focus
{
    outline:1px black dotted;
}

是的,那很简单.

http://jsfiddle.net/b6dbuqqv/

但它不起作用.(Windows 7,Chrome 36)

显然,当通过鼠标激活焦点时,它们似乎是为了摆脱焦点环而实现的.相反,通过键盘导航,它可以按预期工作.

有没有办法解决这个问题？谢谢

Answer 1

似乎点击一个锚不会把焦点放在<a>.因此,:focus伪类不适用.如果您将一个onfocus事件监听器附加到锚点,那么您将看到该事件未在单击时触发(虽然通过键盘导航,tab/shift + tab按预期工作):http://jsfiddle.net/b6dbuqqv/ 1 /

快速搜索Chromium的bug跟踪器会产生crbug.com/388666,它会报告在锚点上按下鼠标键并不会对其进行聚焦.

解决问题的方法是使用:active伪类:

a:focus, a:active {
    outline: black dotted;
}

(并避免不必要的使用!important,顺便说一下)