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

标签 css image hyperlink focus

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

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

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

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

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

有什么想法吗?

最佳答案

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

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

关于css - 样式图像链接成为焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20289535/

相关文章:

html - 使用 List 模拟带有嵌套表格的动态表格 <ul> <li> 仅限 HTML 和 CSS

javascript - 动态图像调整大小

javascript - 更改div react 的onClick路线

javascript - 链接到文本区域

javascript - 单击链接后将全屏 api 保持在全屏状态

指向其他页面、图像和 Css 的 Html 链接在 Docker 容器中不起作用?

css - Vuetify css 压垮 Bootstrap css

css - 什么时候应该在其他类选择器定义中定义 CSS 类选择器?

php - 递归查找具有特定扩展名的图像

html - 如何使某些图像具有特定宽度而不是其他图像?