css - CSSを使用したナビゲーションホバー効果

Question

メニュー項目を背景にしてホバー効果を実現しようとしていますが、cssを使用すると、物事がおかしくなっているように見えます。私はさまざまなことを試しましたが、ホバーしたときにメニュー項目を所定の位置に保持する方法や、テキストを背景の上に貼り付けないようにする方法がわかりません。

http://youvisit.com/creative/FindYourFutureCampaign/html/

Answer 1

cssを修正すると、「ジャンプ」しません。

ul.menuItems li:hover:before {
    background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
    background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}

そして、きちんと働くためにheight諦めなさい。width

Answer 2

問題は、左/右の画像（角が丸い画像）を追加することで、の幅と高さを変更していることです<li>。これらの画像の高さは19ピクセルなので、の高さを19ピクセルにする必要があります<li>。line-heightとを使用してこれを行うことができますheight。その後、のテキストを垂直方向に揃える方法を理解する必要があります<a>。次に、幅の変化に合わせて調整する必要があります。これを行うには、で左/右のパディングを使用し<a>、ホバーでそのパディングを削除します（削除されたパディングは左/右の画像の幅と同じである必要があります）。

これでかなり近づくはずです。IE7/8ではテストしていません。

ul.menuItems li {
    float: left;
    height: 19px;
    line-height: 19px;
    margin-right: 20px;
}
ul.menuItems li a {
    color: #000000;
    display: block;
    float: left;
    height: 19px;
    line-height: 19px;
    padding: 0 2px;
    text-decoration: none;
}
ul.menuItems li:hover a {
    background: url("../img/menuHoverCenter.png") repeat-x 0 0;
    padding: 0;
}
ul.menuItems li:hover:before {
    content: url("../img/menuHoverLeft.png");
    float: left;
}
ul.menuItems li:hover:after {
    content: url("../img/menuHoverRight.png");
    float: right;
}

本当に、これは悪いデザインです。ホバー時にコンテンツを追加する必要はおそらくありません。border-radiusCSS3を使用して角を丸くするのはどうですか。次にlinear-gradient、背景にまたは背景画像を使用します。border-radiusすべてのブラウザでサポートされているわけではありませんが、IE8以下について心配していない場合は、かなりよくサポートされています：http: //caniuse.com/#search=border-radius