javascript - 重叠 2 个 div 边框

Question

我现在有这个设置。我希望这样，当您将鼠标悬停在一个框上时，底部边框会更改为与悬停的 div 内部相同的颜色。我开始认为这不能只用 css 来完成，但是你如何添加 javascript 来做到这一点？

任何指导将不胜感激

http://jsfiddle.net/hCK3D/7/

Answer 1

为什么不直接移除鼠标悬停时的底部边框，而是让元素的高度增加 1 像素？ (您不需要添加任何 JavaScript 代码)

像这样: http://jsfiddle.net/hCK3D/17/

更新:现在边界也没有中断..

更新的 CSS:

.item-container {
    float:left;
    margin-top:20px;
    border-bottom: 1px #BCC0C3 solid;
    height:100px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px #fff solid;
    border-top: 1px #BCC0C3 solid;
    border-bottom: 1px #BCC0C3 solid;
    box-sizing: border-box;
}
.item:first-child {
    border-left: 1px #BCC0C3 solid;
}
.item:last-child {
    border-right: 1px #BCC0C3 solid;
}
.item:hover {
    background:#ECEFF4;
    border-left:1px #BDC0C5 solid;
    border-right:1px #BDC0C5 solid;
    border-bottom: 0;
    height:101px;
}
.item:hover + .item {
    border-left-width: 0;
}