0

ナビゲーションバーのロールオーバーを作成する方法を知りたいのですが、可能であれば、ナビゲーションをホバーした後、JQueryを適用して不透明度を0から100に設定します。

ホバーしたときのナビゲーション。文字の輝き。

代替テキスト

HTML :(空のdivは無視してください）

<nav>
    <ul>
      <div class="ref1"><!-- empty div for reflections --></div>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Client Login</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
      <div class="ref2"><!-- empty div for reflections --></div>
    </ul>
  </nav>

CSS：

nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto;  width: 638px; }
nav ul { padding: 18px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 32px; margin: 0 auto;  }
nav ul li:first-of-type { background: none; }
nav ul li:last-of-type { background: url(../images/ref2.png) no-repeat right bottom; margin: 10px 0 0 0; }
nav ul li a { color: #626262; font: 16px Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }
4

1 に答える 1

0

あなたがする必要があるのはあなたのロールオーバー画像を設定することです。1つは通常の「ホバーされていない」状態用で、もう1つは「ホバーされた」状態用で、関連するクラスをナビゲーションリンクに適用します。

...
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About Us</a></li>
...

次に、CSSを使用して、要素にカーソルを合わせたときに画像を背景画像として表示できます。

<li><a href="#" class="home">Home</a></li>

nav ul li.home:hover {
background: url(../images/home-hover.jpg);
display: block;  /* apply this to give the element the dimensions of your image*/
width: 69px; /*width of your nav image*/
height: 25px; /*height of your nav image*/
}

これは開始するための簡単な例ですが、要素ごとに設定する必要があります。

また、 CSSスプライトを確認することもできます

于 2010-10-07T07:54:43.810 に答える