如何獲得<img>標籤在HTML頁面的焦點

我有下面的代碼：在CSS頁面如何獲得<img>標籤在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;

}

但非他們似乎工作，他們假設在焦點時在圖像周圍顯示藍色邊緣。有沒有人知道如何做到這一點？謝謝！！！

來源

2014-12-06 MauricioTL

你不能「焦點」，除非你有一個互動的元素，或使用標籤定位到它的圖像。嘗試在一個包裝DIV加入互動元素，像這樣：

的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/

來源

2014-12-06 02:58:34 ryanlutgen

-2

嘗試使用邊框屬性而不是大綱屬性。它應該看起來像：

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

編輯：使用懸停，而不是重點

來源

2014-12-06 02:53:46

您在發佈之前是否嘗試過？ – ryanlutgen 2014-12-06 02:58:52

正如他們下面所述，你想使用懸停而不是焦點。 – 2014-12-06 03:02:24

懸停用於懸停，焦點用於聚焦單擊的元素。 – 2014-12-06 03:26:17

其實你可以關注的<img> - 與tabindex的幫助：

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

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

來源

2014-12-06 03:16:36 Leo

這應該是接受的答案。另請參閱http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function（div和img在焦點方面沒有區別）。 – 2017-01-06 23:57:03

如何獲得<img>標籤在HTML頁面的焦點

回答

相關問題