css - 将鼠标悬停在我的顶栏上时出错

Question

正如您在下图中看到的：（我不允许发布图片，所以我已将它们上传到 Twitpic，因为它们对于理解我的问题非常有用）

将鼠标悬停在我的顶栏的一个组件上时，我正在尝试更改顶部边框的颜色。问题是一切都移出栏了..我只想改变边距的颜色而不改变任何东西..我想得到这种效果（这里的边框是底部的，它只是为了你明白我想做什么）：

我以这种方式修改了 CSS 文件：

.top-bar [...]{ background: black; border-top: 10px solid #ffffff; overflow: hidden; }

有什么建议吗？

score 3 · Accepted Answer

默认情况下使边框透明：

.top-bar [...]        {border-top: 10px solid transparent}
.top-bar [...]:hover  {border-top: 10px solid #ffffff}

score 0 · Accepted Answer

尝试将填充添加到顶部（10px）并在悬停时删除填充并将其替换为边框顶部：10px。

所以基本上：

.top-bar{
padding-top: 10px;
}

.top-bar:hover{
padding-top: 0px;
border-top: 10px solid #fff; 
}

希望能解决问题，

2 回答 2