एक <img> टैग फोकस

Question

मैं कोड के नीचे है html पृष्ठ में प्राप्त करने के लिए कैसे: सीएसएस पेज में

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

नीचे कोड:

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

मैं भी कोशिश की है:

img:focus{ 
outline: 2px solid blue; 

}

लेकिन गैर उनमें से काम करने लगते हैं, वे ध्यान केंद्रित करते समय छवि के चारों ओर एक नीला मार्जिन प्रदर्शित करने के लिए प्रतीत होते हैं। क्या कोई जानता है कि यह कैसे करें? धन्यवाद!!!

Answer 1

आप "ध्यान" एक छवि जब तक आप एक इंटरैक्टिव तत्व है या टैब का उपयोग करके उस पर नेविगेट नहीं कर सकता। इसलिए तरह एक आवरण div पर एक इंटरैक्टिव तत्व जोड़ने का प्रयास करें:

एचटीएमएल

<a class="imageAnchor" href="#"> 
    <img id="image_java" alt="image_not" src="http://www.w3schools.com/images/w3logotest2.png" /> 
</a> 

सीएसएस

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

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

Answer 2

रूपरेखा संपत्ति के बजाय सीमा संपत्ति का उपयोग करने का प्रयास करें। यह दिखना चाहिए:

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

संपादित करें: उपयोग के बजाय मंडराना फोकस

Answer 3

वास्तव में आप ध्यान केंद्रित कर सकते एक <img> - tabindex की मदद से:

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

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