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

时间:2013-01-02 18:02:21

标签: css hover border

如下图所示:(我不允许发布图片,因此我已将它们上传到Twitpic上,因为它们对于理解我的问题非常有用)

http://twitpic.com/brvzas

当我将鼠标悬停在顶栏的某个组件上时,我正在尝试更改顶部边框颜色。问题是所有东西都被移出了酒吧..我只想更改边距的颜色而不移动任何东西..我想得到这个效果(这里的边框是底部的,它只是为了制作你理解我想做的事情:

http://twitpic.com/brvzse

我已经用这种方式修改了CSS文件:

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

有什么建议吗?

2 个答案:

答案 0 :(得分:3)

默认情况下使边框透明:

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

答案 1 :(得分:0)

尝试将填充添加到顶部(10px)并在悬停时移除填充并将其替换为border-top:10px。

所以基本上:

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

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

希望这能解决问题,