轮廓被下一个元素隐藏答案

【问题标题】：Outline getting hidden by the next element轮廓被下一个元素隐藏
【发布时间】：2012-08-01 21:30:43
【问题描述】：

我有一排图片，每张图片都包含在一个链接中。

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

问题是，除了最后一张图片之外，RHS 上的轮廓都不见了。

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

当我悬停时，无论如何要让轮廓出现在所有 4 个边上？

（我需要图像相互对接而没有间隙。）

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

+1，这可能是比我更好的答案，而且是一个漂亮的小技巧。
这如何满足图像之间需要零距离的要求？
这从来都不是要求，要求是他们彼此对接，没有间隙。我的不会产生任何间隙，并且无需使用 position: relative hack 即可工作，而这是我试图避免的。
不适合我恐怕因为图像必须相互对接，因为它们构成了更大的无缝图像的一部分（我想我应该更明确）。不过还是谢谢。
非常明确：I need the images to butt up to each other without gaps。您正在制作没有间隙的 background，而不是没有间距的图像；如果与实际上内容一直到边缘的非透明图像一起使用，它们将有非常明显的间隙。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

a > img {
    position: relative;
}

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

【讨论】：