我有几个 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 的原因不同于边框 - 重叠框阴影)
编辑:添加图片
在这张截图中,“秋天”的海报悬停着,它也被放大了很多。请注意,左边框颜色不是较浅(因为它与拳头边框重叠)。
最佳答案
虽然你已经尝试过了,但我认为 z-index
是最好的选择。它纯粹是为了能够管理每个元素的 z 位置而设计的。
例如,请参阅此 jsfiddle:
也许你在做一些不同的事情。
关于css - 悬停时如何将重叠边框置于前面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13533786/