5

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

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

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

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

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

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

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

4

3 に答える 3

7

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

ただし、「タグ」をブロックとして表示し、「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 を使用すると、ブラウザー間の互換性が向上します。

于 2010-06-23T11:50:09.707 に答える
5

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

<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);
}
于 2010-06-23T11:42:14.320 に答える
4 
#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では動きません...

于 2010-06-23T11:46:35.847 に答える