如何获得< img>标记焦点 [英] How to get a <img> tag the focus

问题描述

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

 < img id =image_javaalt =image_notsrc = 图像/ java的的icon.png > 
  

在css页面下面的代码：

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

我也试过：

  img：focus {
大纲：2px纯蓝色; 
  

}

工作时，他们假设焦点时在图像周围显示蓝色边缘。
是否有人知道如何做到这一点？谢谢！

解决方案

除非您有交互式元素或使用导航到它，否则您无法聚焦标签。尝试在包装div上添加交互元素，如下所示：

Html

 < a class =imageAnchorhref =＃> 
< img id =image_javaalt =image_notsrc =http://www.w3schools.com/images/w3logotest2.png/> 
< / a> 
  

CSS

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

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

I have below code in html page:

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

in css page the below code:

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

I have also tried:

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!!!

解决方案

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/

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