Html 轮廓被下一个元素隐藏

我有一行图片，每一个都用一个链接包装

我希望鼠标悬停时，每个图像周围都显示一个虚线轮廓

问题是，除了最后一张图片外，所有RHS上的轮廓都丢失了

就好像这些图像与图像左侧的轮廓重叠一样

当我悬停时，是否要在所有四个面上显示轮廓

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

我在FF14，chrome，IE9上试过了

---

您可以将每个图像边框设置为1px纯色，无论背景颜色是什么，然后在

img:hover

上设置所需的边框。下面是我所说的一个工作示例：

---

只需添加

位置：相对；z-index:1000

到其

：悬停

样式：

---

更新：实际上，您甚至不需要

z-index

，相对定位本身就可以实现您的目标。

最简单的方法是将

位置：相对
分配给
a
元素，然后增加
a>img:hover的
z-index
（而不是设置
a:hover
：

a > img {
    position: relative;
}

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

.
@Brandon，我就是这么想的。然后我再次点击“运行”，突然，有效的图像出现了。@Brandon，它们是有效的图像。或者有更好的方法吗？@spiderplant0，不，这是我的错误。这些图像实际上是有效的，我只需要先运行JSFIDLE。抱歉。+1，这可能是比我的更好的答案，一个d一个漂亮的小把戏。这如何涵盖图像之间需要零距离的要求？这从来不是一个要求，要求它们相互对接，没有间隙。我的没有间隙，并且工作时不需要使用我试图避免的
位置：相对
hack。不合适对我来说，我担心图像必须相互碰撞，因为它们构成了更大的无缝图像的一部分（我想我应该更明确）。无论如何，还是要谢谢。这很明确：
我需要图像无间隙地相互对接
。您生成的背景没有间隙，而不是图像之间没有间距；如果与实际内容一直到边缘的不透明图像一起使用，它们将有非常明显的间隙。