How to get the <img> tag in focus

Question

I have the code below on the html page:

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

the css page has the code below:

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

I also tried:

 img:focus{ outline: 2px solid blue; 

}

but not one of them seems to work, they should display a blue marker around the image when focusing. Does anyone know how to do this? thanks!!!

Answer 1

You cannot “focus” an image if you do not have an interactive element or go to it using the tab. Try adding an interactive element on a div wrapper like this:

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 2

Actually, you can focus <img> - with tabindex :

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

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

Answer 3

Try using the border property instead of the outline property. It should look like this:

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

Edit: Use hovering instead of focus