0

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

任何指导将不胜感激

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

4

3 回答 3

2

为什么不直接删除悬停时的底部边框，而是让元素的高度增加 1px？（您不需要添加任何 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;
}
于 2012-09-21T11:40:06.127 回答
1

你的意思是这样吗？

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;}
于 2012-09-21T11:41:25.070 回答
1

将 div 容器边框与悬停时的项目边框重叠

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

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

请参阅 JSFiddle 获取源代码

于 2012-09-21T11:44:59.910 回答