Come ottenere un tag <img> l'attenzione

Question

devo sottostante Codice in pagina html:

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

nella pagina CSS il codice qui sotto:

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

Ho anche provato:

img:focus{ 
outline: 2px solid blue; 

}

ma non di loro sembrano funzionare, suppongono di mostrare un margine blu attorno all'immagine quando si concentra. Qualcuno sa come farlo? grazie!!!

Answer 1

Non è possibile "focus" di un'immagine a meno che non si dispone di un elemento interattivo o navigare ad esso utilizzando la scheda. Prova ad aggiungere un elemento interattivo su un div involucro in questo modo:

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

Provare a utilizzare la proprietà border invece della proprietà outline. Esso dovrebbe essere simile:

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

Edit: Uso hover invece di concentrarsi

Answer 3

In realtà si può mettere a fuoco <img> - con l'aiuto di tabindex:

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

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