html - 制表符时如何使边框出现在图像上？

Question

我正在建立我的第一个网站。规范的很大一部分是它应该对用户非常友好。

我的主页顶部有几张带有超链接的图片。它们有灰色边框，将鼠标悬停在图像上时会变为粉红色。

我遇到的问题是，我可以将我的 was 标记到图像上，然后在打开的链接中点击返回结果，这很好，但是当我标记到它时，边框不会改变颜色，所以如果并非不可能知道您当前被标记到哪个图像。

边界代码:

<style>
IMG.HoverBorder {border:1px solid #eee;}
    IMG.HoverBorder:hover {border:1px solid #FC359A;}
</style>

Answer 1

:focus 伪类匹配具有焦点的元素，但 img 元素通常没有(也不需要)焦点。但是构成链接的 a 元素是可聚焦的，因此您需要使用与 img 元素相匹配的选择器，该元素是聚焦元素的子元素。示例(为清楚起见，使用 3px 粗边框):

IMG.HoverBorder { border: 3px solid #eee; }
IMG.HoverBorder:hover { border: 3px solid #FC359A; }
a:focus IMG.HoverBorder {border-color: green;}
img { vertical-align: bottom; } /* to make border sit tight around */

<input placeholder="Click here and press TAB">
<a href="foo"><img class=HoverBorder src="http://lorempixel.com/100/50" alt=dummy1></a>
<a href="bar"><img class=HoverBorder src="http://lorempixel.com/100/100" alt=dummy2></a>