html - 轮廓被下一个元素隐藏

Question

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

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

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

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

无论如何，当我悬停时，要在所有 4 面都出现轮廓？

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

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

score 16 · Accepted Answer

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

a > img {
    position: relative;
}

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

score 13 · Accepted Answer

只需添加position: relative; z-index: 1000他们的:hover风格：更新的小提琴

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

score 0 · Accepted Answer

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

3 回答 3