<分区>
<分区>
我有 3 个垂直排列的 1px 的 div，重叠的边框。当我将鼠标悬停在底部 div 上时，它的整个边框都会突出显示。但是，当我将鼠标悬停在顶部或中间的 div 上时，边框的底部会被下面的 div 遮挡。我怎样才能解决这个问题？我尝试在悬停样式上设置 z-index，但它似乎没有强制将 div 置于其他兄弟之上。
.box {
border: 1px solid #ccc;
padding: 0.25em;
width: 100px;
}
.box:nth-child(2) {
margin-top: -1px;
}
.box:nth-child(3) {
margin-top: -2px;
}
.box:hover {
border-color: #000;
z-index: 1 !important;
}<div class="box">Top</div>
<div class="box">Middle</div>
<div class="box">Bottom</div>最佳答案
您需要添加 position: relative; 以便 z-index 起作用，因为它仅适用于定位元素。
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
关于html - 重叠边界悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29351883/