悬停时如何将重叠边框放在前面？

Question

我有几个 div 水平排列，黑色边框为 1px。它们在左侧/右侧重叠。我不想添加边距，因为当元素彼此相邻时，这会导致边框为 2px。

当用户将鼠标悬停在边框上时，边框变为白色。问题是第二个元素（以及第一个元素之后的其他元素）的左边框隐藏在前一个元素的后面，并且左边框似乎没有改变颜色。如何使悬停的元素位于顶部？我尝试了 z-index 没有任何变化。

.upcoming a:before{
    display:block;
    content:'';
    position:absolute;
    width:184px;
    height:277px;
    border:1px solid #666;
}

.upcoming a:hover:before{
    border-color:#CCC;
}

（我使用 :before 的原因与边框重叠的框阴影不同）

编辑：添加图片

在这个屏幕截图中，“秋天”海报被悬停，也被放大了很多。注意左边的边框不是浅色的（因为它被拳头边框重叠了）。

Answer 1

虽然您已经尝试过了，但我认为z-index 是这里的最佳选择。它纯粹是为了能够管理每个元素的 z 位置而设计的。

例如看这个jsfiddle：

http://jsfiddle.net/CjYa9/1/

也许你在做一些不同的事情。