丸いCSSタブ

Question

CSSを使用して丸みを帯びたナビゲーションタブを作成しましたが、hoverを実装するときに問題が発生しました。

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

#navigation liアイテムに背景画像が設定されており、これには左隅が含まれています。次に、2番目の背景画像（右隅）があり、これは#navigation aを使用して設定されます。

ただし、タブの左側にカーソルを合わせると、背景の小さな部分のみが表示されます。これは、li領域のみにカーソルを合わせているためだと思われます。明らかに、残りの部分にカーソルを合わせたときのように、タブ全体が強調表示されるようにします。

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

Answer 1

いくつかのこと：

<！> lt; li <！> gt;のパディングを外して問題を修正します。子<！> lt; a <！> gt;に戻す-ホバーを揃えるために、彼らが占めるスペースは同じである必要があります。

別の問題が発生したため、左隅は表示されません。これを修正するには、色ではなくaおよびa:hoverの背景色をtransparentに等しくします。現在は<！> lt; li <！> gt;透けて見える。

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

edit：こちら

Answer 2

jQueryを使用すると、非常に簡単です。 スケーラブルなボックスを試すこともできます：

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

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

Answer 3

または、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では動作しない可能性があることに注意してください。