Question

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

我的主页顶部有一些附有超链接的图片。它们有一个灰色边框，当悬停在图像上时会变为粉红色。

我遇到的问题是我可以将我的标签设置为图像并在打开的链接中返回返回结果，这样就可以了，但是当我选中它时边框不会改变颜色，所以很难不可能知道你当前选中的图像。

边境代码：

<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>

标签时如何在图像上显示边框？

1 个答案: