Question

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

任何指导都将不胜感激

Answer 1

为什么不在悬停时移除底部边框，而是将元素的高度设置为1px？（您不需要添加任何JavaScript代码）

更新：现在边框也没有中断..

更新的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;
}

Answer 2

你是说这个意思吗？

jsfiddle

.body{background:#ECEFF4;}
.item-container {
    float:left;
    border-top: 1px solid #BCC0C3;
    margin-top:20px;
}
.item {
    float:left;
    background: #ccc;
    width: 100px;
    height: 100px;
    border-left: 1px solid #fff ;
    border-bottom: 1px solid #BCC0C3;
}

.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}

.item:hover {
    background:#ECEFF4;
    border-left:1px solid #BDC0C5;
    border-right:1px solid #BDC0C5;
    border-bottom: 1px solid #ECEFF4;
}

.item:hover + .item {border-left-width: 0;}

Answer 3

在悬停

上重叠带有项边框的div容器边框

与发布的其他答案不同，此解决方案允许您将边框线保持在底部：http://jsfiddle.net/hCK3D/15/ 和您的白色垂直线将继续出现正确。

这个想法是现在在项目中设置了从底部开始的边框，当项目悬停时，底部边框会改变颜色以匹配悬停颜色。同样容器边框设置为白色垂直线，但悬停时，项目悬停边框底部显示在容器边框的前面。

See the JSFiddle for source

重叠2 div边界

3 个答案:

在悬停