如何使<img>标签获得焦点

Question

我在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;

但是它们似乎都不起作用，它们应该在焦点时显示图像的蓝色边框。 有人知道怎么做吗？谢谢！！！

- MauricioTL

Answer 1

实际上，您可以通过使用 tabindex 属性来使 <img> 元素聚焦：

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

<img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0">

- Leo

---

这应该是被接受的答案。同时参考http：//stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function（在焦点方面，div和img并没有太大的差异）。 - Christian Fritz

还要为img元素添加一个键盘事件处理程序。 - Edward

Answer 2

如果没有交互元素或者通过 tab 导航到图像，你无法“聚焦”图像。尝试在包装 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;
}

http://jsfiddle.net/4x7wg7sb/1/

- ryanlutgen

Answer 3

如果它是锚标签，您也可以使用

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

- Derek Moore

---

你应该对这个答案中的代码进行格式化。 - derekbaker783

Answer 4

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

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

编辑： 使用hover而不是focus

- Tai Kwangi Chicken

---

你在发布之前试过这个吗？ - ryanlutgen

正如他们在下面所述，你应该使用hover而不是focus。 - Tai Kwangi Chicken

悬停(Hover)用于悬停操作，聚焦(Focus)用于聚焦所点击的元素。 - Onel Sarmiento