css - 选项卡式链接时如何更改链接的图像？

Question

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

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

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

我们有代码：

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

关于我们如何突出显示他标记的图像的任何建议？

Answer 1

我们如何突出显示他已标签到的图像

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

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

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

box-shadow: 0 0 10px #F00;

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

Answer 2

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

尝试：

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