web-dev-qa-db-ja.com

a：hoverでliの背景画像を変更する

私はメニューを持っています：

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

引き戸のテクニックを使って、ボタンを作成したいと思います（下部に丸い角があります）。

Aとliにカーソルを合わせると、これを機能させることができます。ただし、liの方が大きく、aにカーソルを合わせずにliにカーソルを合わせると、liの背景画像のみが表示されます。

今、私はliのホバーとcss内のaのホバーを接続する方法があるかどうか疑問に思っています。私はむしろjavascriptを使用せずにこの問題を修正します。

グーグルはそれ以上私を助けませんでした。これは不可能だと思いますが、他のオプションを試す前に確認したかったのです。

アドバイス/ヘルプ/提案を事前に感謝します。

csssliding-doors
5
Rick de Graaf

私が集めたものから、あなたはあなたがそれを説明した方法であなたが求めていることをすることができません。

ただし、「タグ」をブロックとして表示し、幅と高さを設定して「LI」を埋めます。これにより、a：hoverを使用して、bg全体を変更し、LIが変更されているように見せることができます。


li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

また、いくつかのパディングを使用して、テキストを「LI」内の適切な場所に配置し、「LI」からパディングを削除します。

li：hoverは、古いバージョンのIEではJSなしではサポートされていないため、代わりにa：hoverを使用すると、ブラウザー間の互換性が向上します。

7
Brady

これは次の方法で簡単に実行できます。

<div id=menu>
   <ul>
     <li><a href=>Home</a></li>
   </ul>
</div>

次に、CSSで：

#menu ul li:hover{
   background-image:url(newimage);
}

IE6に準拠する必要がある場合は、リンクをULの幅全体に表示するだけです。

#menu ul li a:link, #menu ul li a:visited{
    display:block;
    width:999px;  <-- enter pixels
    height:999px; <-- enter pixels
}

次に、背景画像を通常どおりに変更します。

#menu ul li a:hover{
    background-image:url(newimage);
}
5
Sam152
#menu li {
  /* normal li style */
}

#menu li a {
  /* normal a style */
}

#menu li:hover {
  /* hover li style */
}

#menu li:hover a {
  /* hover a style */
}

IE6では動作しません...

4
petraszd