大纲被下一个元素隐藏

Question

我有一排图像，每个图像都包含一个链接。

当我将鼠标悬停在鼠标上时，我想在每个图像周围出现虚线轮廓。

问题是，除了最后一张图像之外，RHS上的轮廓都没有了。

好像图像与左侧图像的轮廓重叠。

无论如何，当我悬停时，四边都会出现轮廓？

（我需要将图像彼此对接​​而没有间隙。）

我在FF14，chrome，IE9上试过这个。

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

Answer 1

最简单的方法是将position: relative分配给a元素，然后增加z-index的{​​{1}}（而不是为a > img:hover设置样式：

a:hover

JS Fiddle demo

Answer 2

只需将position: relative; z-index: 1000添加到:hover样式：updated fiddle

即可

更新：实际上，您甚至不需要z-index，相对定位本身就可以实现您的目标。

Answer 3

无论背景颜色如何，您可以将每个图像边框设置为1px实体，然后在img:hover上将边框设置为您想要的边框。这是我正在谈论的一个有用的工作方式：
http://jsfiddle.net/P3WBG/12/