0

Web サイトのナビゲーションにマウスオーバー効果を作成しようとしています。ナビゲーションは、いくつかのアイテムを含む水平バーです。以下のコード。

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Our work and portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

これには無地の背景色があり、すべての間に<li>アイテムを分離する境界線があります。ここで、ホバー時に背景画像を表示したいと思いますが、私の問題は、ご覧<li>のとおり、内容によってすべての幅が異なり、ホバーの画像は以下のとおりです。

ホバー効果

つまり、実際には左右の黒い影だけです。右の影は絶対右側に配置し<li>、左の影は絶対左側に配置する必要があります。

これを達成する方法はありますか？jQuery などを使用している場合は問題ありません。

前もって感謝します。

4

2 に答える 2

0

影と可変長効果が必要な場合。次に、画像を 3 つの部分に分割します。マークアップを次のように更新します

  1. 左の影
  2. センターパート
  3. 右の影

次に、次の CSS スニペットを使用します

li a:hover:before { content: url("image/leftshadow.jpg"); }
li a:hover { background-Image: url("image/center.jpg"); }
li a:hover:after { content: url("image/rightshadow.jpg"); }
于 2012-04-16T23:06:47.473 に答える
0

画像は線形グラデーションのように見えるので、使用してみてください

background-image: linear-gradient(to right, #111, #333, #111);

古いブラウザーのサポートを追加することができます。

于 2012-04-16T23:15:51.350 に答える