1

Twitterブートストラップを使用します。このサイトには、リンクで構成されるトップナビゲーションバーがあります。一部にはddメニューがあり、一部は静的リンクです。

テキストアンカーの代わりにimgを使用してリンクを作成しています。

ナビゲーションバーの各リンクにホバー効果を適用したいと思います。これは、画像を交換するか、スプライトに別の背景の場所をロードすることによって行われます。

ナビゲーションバーを指定する通常の方法を使用していますが、

  <ul class="nav nav-pills">
         <li class="dropdown" id="hifiMenu">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="$PRE/images/newhifi.png"></a>
         <ul class="dropdown-menu">
               <li class="mainitem"><a href="$PRE/newhifi">BY BRAND</a></li>

#hifiMenuのAリンクにホバーを置くことは可能ですか？ドロップダウンがアクティブになっているときに、画像がスワップアウトされていますか？

TBのナビゲーションバーコントロールを使用する場合のベストプラクティスがよくわかりません。誰かがこのようなことを試しましたか？

前もって感謝します。

4

1 に答える 1

1

私の質問で述べたように、私は次のナビゲーションバーアイテムを持っています：

<ul class="nav nav-pills">
     <li class="dropdown" id="hifiMenu">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
     <ul class="dropdown-menu">
           <li class="mainitem"><a href="newhifi">BY BRAND</a></li>
....

ホバーを機能させるために、私は最初に、すべての通常の/強調表示された画像を含む大きなスプライト画像を作成しました。

次に、リンクごとに新しいスタイルを設定します。

#hifiMenuLink {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -6px;
}

次にホバーします：

#hifiMenuLink:hover {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -37px;
}

次に、ID、hifiMenuLinkをアンカー自体に割り当てました...

<a id="hifiMenuLink" ...

それは私の迅速で汚い解決策でした。

これが将来誰かを助けることができることを願っています。

于 2012-04-26T14:25:24.943 に答える