由下一個元素隱藏的輪廓

Question

我有一行圖像，每個圖像都包含在一個鏈接中。

我想要在每個圖像周圍出現一個虛線輪廓，當我將鼠標懸停時。

問題是，除了最後一張圖像之外，RHS上的輪廓都沒有。

它就好像圖像與其左側的圖像輪廓重疊。

無論如何，當我懸停的時候，在所有的四面都會出現輪廓？

（我需要的圖像，以對接高達彼此無間隙。）

我嘗試了這一點上FF14，鉻，IE9。

http://jsfiddle.net/spiderplant0/P3WBG/

Answer 1

最簡單的方法是分配position: relative到a元素，然後增加a > img:hover的z-index（而不是造型的a:hover：

a > img { 
    position: relative; 
} 

a > img:hover { 
    outline: 3px dotted blue; 
    z-index: 3000; 
} 

JS Fiddle demo

Answer 2

你可以做的是設置每個圖像的邊框是1px的固體任何背景顏色，然後在img:hover你設置邊框你想要什麼。下面是我在說什麼工作的jsfiddle：
http://jsfiddle.net/P3WBG/12/

Answer 3

只需添加position: relative; z-index: 1000他們:hover風格：updated fiddle

更新時間：事實上，你甚至都不需要z-index，相對定位本身完成你的目標。