css - 样式图像链接成为焦点

Question

我正在尝试改进样式表中缺少“焦点”的 WordPress 网站的可访问性。

我了解如何设置文本链接的样式，但我似乎无法将其应用于图像链接。我想在对焦时在图像下方放一条虚线。

这是我所说的 - 非常简单:

a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}

它适用于悬停，但不适用于焦点!

有什么想法吗？

Answer 1

只需将伪类移动到 a 元素即可:

a:hover img {border-bottom: 3px dashed #000;}
a:focus img {border-bottom: 3px dashed #000;}