如何更改链接图片的选项卡？

Question

我们正在为用户编写一个网站，不能使用鼠标。他想要按下键盘上的Tab以在图像之间移动，然后按回车键以转到与该图像关联的href链接。我们做得很好。

但是，我们如何以某种方式突出显示图像，以便他可以轻松地看到他选中哪个图像？

我们没有一个jQuery的技能，所以我们试图让我们的编码，HTML和CSS

我们有代码：

我以为我可以介绍一个类改变一些关于图像的东西。 例如，我们引入了一个类 .classA {border：double;} 并使用它
但这没有奏效。我们尝试了很多效果，但都没有效果。

有关我们如何突出显示他所选图像的任何建议？

Answer 1

我们如何能突出他将转到

当一个页面上锚之间跳格的图像，即元素获得“焦点” - 使用:focus伪选择，因此，我们可以restyle是图像

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

虽然添加边框可能会破坏布局 - 你可以改为做这样的事情：

例如 - 已标签与 a:focus img锚内

box-shadow: 0 0 10px #F00; 

给它一个红色的辉光 - 使其明显，而不影响元素的布局。

Answer 2

请记住，默认情况下，浏览器提供一个大纲。

尝试：

IMG：重点{ 概述：无; border：2px solid #ABCDEF; }