如何在悬停时将重叠的边框带到前面？

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;
}

（我正在使用：之前的原因不同于边框 - 重叠的盒子阴影）

编辑：添加图片

在这个截图中，“秋天”海报徘徊，它也被放大了很多。请注意，左边框颜色不浅（因为它与拳头边框重叠）。

Answer 1

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

例如，请参阅此jsfiddle：

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

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