如何更改鏈接圖片的選項卡？

Question

我們正在爲用戶編寫一個網站，不能使用鼠標。他想要按下鍵盤上的Tab以在圖像之間移動，然後按回車鍵以轉到與該圖像關聯的href鏈接。我們做得很好。

但是，我們如何以某種方式突出顯示圖像，以便他可以輕鬆地看到他選中哪個圖像？

我們沒有一個jQuery的技能，所以我們試圖讓我們的編碼，HTML和CSS

我們有代碼：

我以爲我可以介紹一個類改變一些關於圖像的東西。 例如，我們引入了一個類 .classA {border：double;} 並使用它
但這沒有奏效。我們嘗試了很多效果，但都沒有效果。

有關我們如何突出顯示他所選圖像的任何建議？

Answer 1

我們如何能突出他將轉到

當一個頁面上錨之間跳格的圖像，即元素獲得「焦點」 - 使用:focus僞選擇，因此，我們可以restyle是圖像

a:focus img { 
    border: 1px solid #F00; 
} 

雖然添加邊框可能會破壞佈局 - 你可以改爲做這樣的事情：

例如 - 已標籤與 a:focus img錨內

box-shadow: 0 0 10px #F00; 

給它一個紅色的輝光 - 使其明顯，而不影響元素的佈局。

Answer 2

請記住，默認情況下，瀏覽器提供一個大綱。

嘗試：

IMG：重點{ 概述：無; border：2px solid #ABCDEF; }