css - トップバーにカーソルを合わせるとエラーが発生します

Question

次の画像にあるように:(画像を投稿することは許可されていないので、質問を理解するのに非常に役立つので、Twitpicにアップロードしました）

http://twitpic.com/brvzas

トップバーのコンポーネントにカーソルを合わせると、トップボーダーの色を変更しようとしています。問題は、すべてがバーからシフトアウトされることです。何もシフトせずにマージンの色を変更したいだけです。この効果を取得したいです（ここでは境界線が一番下にあり、作成するだけです。あなたは私がやりたいことを理解しています）：

http://twitpic.com/brvzse

CSSファイルを次のように変更しました。

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

何かアドバイス？

Answer 1

デフォルトでボーダーを透明にします。

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

Answer 2

トップ (10px) にパディングを追加し、ホバー時にパディングを削除して、border-top: 10px に置き換えてみてください。

だから基本的に：

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

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

うまくいけば、問題は解決します。