Tabindex焦点样式

Question

我已经div使用该tabindex属性创建了一个tabbable,以使隐藏内容可访问.

目前,当用鼠标点击时,div获取浏览器:focus样式.

有没有办法让tabbable元素在通过键盘访问时只有焦点样式？锚元素默认具有此功能.

• Div用tabindex='0'得到的鼠标和键盘交互浏览器的焦点风格
• Anchor仅在键盘交互上获得浏览器焦点样式

我希望div模仿锚点.不幸的是,让它成为锚是一种选择.

任何帮助都会很棒,我真的很茫然.

编辑 - >这是一个例子:http://jsfiddle.net/LvXyL/2/

Answer 1

当然只需将:focus伪类添加到div和样式中.我建议使用大纲与边框.我更新了小提琴.

div:focus {outline: blue solid 2px;}

Kub提出了一个JS解决方案,但为什么使用js,如果你实际上不需要？

Answer 2

如果您可以使用 javascript，请尝试使用onclick属性。

onclick="this.blur()"对于失去焦点

onclick="this.focus()"用于设定焦点

DIV单击失去焦点并A设置焦点的示例http://jsfiddle.net/LvXyL/6/

缺点是如果长时间按住鼠标键，焦点样式会很明显。