0

CSS を使用していくつかの丸みを帯びたナビゲーション タブを作成しましたが、実装時に問題が発生していますhover。

説明するのが非常に難しいので、まずここにサイトタブへのリンクを示します。私の問題を理解するために、タブの左側にカーソルを合わせてください。以下に説明しました。

#navigation li左側の角を含むアイテムに背景画像を設定し、次に#navigation a.

ただし、タブの左側にカーソルを合わせると、背景の小さな部分しか表示されません。明らかに、残りの部分にカーソルを合わせたときと同じように、タブ全体を強調表示したいと思います。

これを説明するのは非常に難しいので、問題を理解するためにさらに質問する必要がある場合は、質問してください。

4

3 に答える 3

4

いくつかのこと：

<li> からパディングを取り除き、子 <a> に戻すことで問題を解決します。ホバーを整列させるには、それらが占有するスペースを同じにする必要があります。

別の問題が発生しました。左隅が表示されません。これを修正するには、色の代わりにaand a:hoverequal toの背景色を作成します。これtransparentで <li> が透けて見えるようになります。

最後に、動作を完全に別の画像から、背景位置が異なる同じ画像に変更して、ロールオーバーが目に見えないようにロードすることをお勧めします。

編集：ここで説明されている画像スワップなしのcssロールオーバー

于 2008-12-30T17:12:29.513 に答える
0

または、li:hover と a:hover を次のように置き換えることもできます。

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

IE6 では動作しない場合があることに注意してください。

于 2008-12-30T17:26:57.267 に答える
0

jQueryを使えば超簡単！ただし、スケーラブル ボックスを試すこともできます。

http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

ホバー時に背景画像を変更します。

于 2008-12-30T17:16:49.487 に答える