css - 当链接被标记为时，如何更改链接的图像？

Question

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

但是我们怎样才能以某种方式突出显示图像，以便他可以轻松地看到他已经切换到哪个图像？

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

我们有代码:

我想我可以引入一个类来改变图像的一些东西。 比如我们引入了一个类 .classA {边界:双;} 并使用它
但这没有用。我们尝试了很多效果，但没有一个奏效。

关于我们如何突出显示他点击的图像有什么建议吗？

Answer 1

how we can highlight the image he has tabbed to

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

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

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

box-shadow: 0 0 10px #F00;

在不影响元素布局的情况下，给它一个红色的光芒 - 使其明显。