twitterブートストラップドロップダウンメニューでホバーイメージを使用する方法

Question

twitterブートストラップを使用する。サイト上には、いくつかのdd-menusがあるリンクで構成されたトップナビゲーションバーがあり、いくつかは静的リンクです。

私はテキストアンカーの代わりに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のリンクをホバーを配置することも可能であるし、ドロップダウンがアクティブになったとき、画像が入れ替わっていますでる？

TBのナビゲーションバーコントロールを使用するのがベストプラクティスであるかどうかは不明です。誰もがこのようなことをしたことがありますか？

ありがとうございます。

Answer 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; 
} 

それから私は、アンカー自体に、hifiMenuLink、IDが割り当てられ..

<a id="hifiMenuLink" ... 

これは私の迅速かつ汚れた解決策でした。

これは今後誰かを助けることを願っています。