如何获得焦点<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;

}

但是它们似乎不起作用，他们假设在焦点时在图像周围显示蓝色边距。 有谁知道这是怎么做到的吗？谢谢!!!

Answer 1

实际上，您可以在<img>：

的帮助下关注tabindex

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

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

Answer 2

你无法专注于＆＃34;除非您有交互式元素或使用制表符导航到它，否则您将看到图片尝试在包装器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/

Answer 3

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

A：focus img {border：2px blue blue;}

Answer 4

尝试使用border属性而不是outline属性。它应该看起来像：

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

编辑：使用悬停而非焦点