：專注於一個IMG

Question

我有工作正常，但我目前正在建設一個CMS吧，這樣我可以簡單地上傳圖片的投資組合，並把它添加到網站，以便我。之前，我建了，我重建了一些零碎的代碼，並轉換什麼是JS供電畫廊供電的一個CSS。

我想實現這個CSS喀嚦效果。 http://www.tomdwyerdesign.com/graphics/

我想我可以通過做：對焦選擇，但我碰到的一個小問題。

這是HTML：

<a class="tile" href="#"> 
     <img src="images/thumbs/DLPWD.png" class="dlpwd" /> 
</a> 

，這是CSS：

.tile:focus img{ 
background-image: url("images/large/DLPWD.png"); 
width: 771px; 
height: 600px; 
} 

它似乎並不正確選擇它。任何人知道爲什麼？

謝謝。

Answer 1

問題在於，點擊鏈接時不一定會關注鏈接，當您導航到該鏈接時，鏈接將會重點關注。你可以用鍵盤來做到這一點，或者你可以添加一個點擊處理程序的鏈接。當然，在這一點上，你回到了JavaScript，但它顯示了正在發生的事情。

E.g.

<a class="tile" href="#" onclick="this.focus()"> 
    <img src="images/thumbs/DLPWD.png" class="dlpwd" /> 
</a> 

幸運的是，有一個更好的解決方案，並且不需要JavaScript。如果你添加一個tabindex到鏈接，點擊它將會聚焦它，即使href無處可去。所以...

<a class="tile" href="#" tabindex="0"> 
    <img src="images/thumbs/DLPWD.png" class="dlpwd" /> 
</a> 

應該做你想做的。 （你的下一個問題是背景圖像在src圖像前不可見 - 你只能得到縮略圖的延伸版本，但我認爲這是一個不同的問題）

Answer 2

:focus是僅在接收鍵盤輸入（即形式的元素）的元素可用。你可以嘗試:active但是當鼠標按鍵時，將只適用的CSS。