选项卡式链接时如何更改链接的图像？答案

【问题标题】：How can I change an link's image when it's tabbed to?选项卡式链接时如何更改链接的图像？
【发布时间】：2013-10-10 20:38:14
【问题描述】：

我们正在为无法使用鼠标的用户编写网站。他想按键盘上的 Tab 在图像之间移动，然后按回车键转到与该图像关联的 href 链接。我们已经解决了很多问题。

但是我们如何才能以某种方式突出显示图像，以便他可以轻松地看到他已经标签到哪个图像？

我们没有 jQuery 技能，所以我们试图将我们的编码保持为 html 和 css

我们有代码：

我想我可以引入一个类来更改图像的某些内容。比如我们引入了一个类 .classA {border:double;} 并使用它
但这没有用。我们尝试了很多效果，但都没有效果。

关于我们如何突出显示他使用标签的图像有什么建议吗？

【问题讨论】：

img:focus { border:1px solid red; } ?不完全确定图像是否可以在没有包装锚的情况下被标记。在这种情况下，您希望 a:focus img 作为您的选择器

【解决方案1】：

我们怎样才能突出显示他已经标签到的图像

当在页面上的锚点之间切换时，该元素获得“焦点” - 使用 :focus 伪选择器，因此我们可以重新设置已使用 a:focus img 切换到的锚点内的图像 - 例如：

a:focus img {
    border: 1px solid #F00;
}

虽然添加边框可能会破坏布局 - 您可以改为执行以下操作：

box-shadow: 0 0 10px #F00;

给它一个红色的光芒 - 让它很明显，而不影响元素的布局。

【讨论】：

【解决方案2】：

请记住，默认情况下，浏览器会显示一个大纲。

试试：

img:焦点{ 大纲：无；边框：2px 实心#ABCDEF； }

【讨论】：