如何让 <img> 标签成为焦点答案

【问题标题】：How to get a <img> tag the focus如何让 <img> 标签成为焦点
【发布时间】：2015-02-04 07:46:49
【问题描述】：

我在 html 页面中有以下代码：

<img id="image_java"  alt="image_not" src="images/java-icon.png">

在css页面中如下代码：

#image_java: focus {
outline: 2px solid blue;
}

我也试过了：

img:focus{
outline: 2px solid blue;

}

但它们似乎都不起作用，它们应该在聚焦时在图像周围显示蓝色边距。有谁知道这是怎么做到的吗？谢谢！！！

【问题讨论】：

标签： html css

【解决方案1】：

尝试使用边框属性而不是轮廓属性。它应该看起来像：

img:hover {
    border: 2px solid blue;
}

编辑：使用悬停代替焦点

【讨论】：

【解决方案2】：

除非您有交互式元素或使用选项卡导航到它，否则您无法“聚焦”图像。尝试在包装器 div 上添加交互式元素，如下所示：

HTML

<a class="imageAnchor" href="#">
    <img id="image_java" alt="image_not" src="http://www.w3schools.com/images/w3logotest2.png" />
</a>

CSS

.imageAnchor:focus img{
    border: 2px solid blue;
}

【讨论】：

【解决方案3】：

实际上，您可以在tabindex 的帮助下关注<img>：

img:focus {
    outline: 2px solid blue;
}

&lt;img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0"&gt;

【讨论】：

【解决方案4】：

如果它是一个锚标签，你也可以使用

A:focus img{border: 2px solid blue;}

【讨论】：