如何获取& lt; img& gt;标记焦点 [英] How to get a <img> tag the focus

问题描述

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

I have below code in html page:

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

在CSS页面中的以下代码:

in css page the below code:

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

我也尝试过:

img:focus{
outline: 2px solid blue;

}

但是它们似乎都不起作用，它们被认为在聚焦时在图像周围显示了蓝色边距.有谁知道这是怎么做到的吗?谢谢！！！

but non of them seem to work, they are suppose to display a blue margin around the image when focus. Does any one know how to do that? thank you!!!

推荐答案

除非具有交互式元素或使用制表符导航至图像，否则无法聚焦"图像.尝试像这样在包装器div上添加一个交互式元素:

You can't "focus" an image unless you have an interactive element or navigate to it using tab. Try adding an interactive element on a wrapper div like so:

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/

这篇关于如何获取& lt; img& gt;标记焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！