jQueryのドロップダウンメニューのホバー状態

Question

私の問題は、次のとおりです。

私は、ドロップダウンメニューを持っていると私は、メニューにテキストの色の変化を置いて、ときに私はサブメニューを置くとホバー状態は両方のためにとどまることを望みます。このコードを使用します：

$("ul li").hover(function() { 

    $(this).stop().animate({ backgroundColor: "white"}, 500); 

}, 
function() { 

    $(this).stop().animate({ backgroundColor: "black"}, 400); 

}); 

} 

メニューとサブメニューのホバーの背景色をアニメーション化するには：

ホバー上のテキストの色を変更したい（同じカラーアニメーションではなく、メニューとサブメニューでは異なる）。私はこのコードを使用します。この場合：（サブメニューの一例を、メニューたとえば、$（「ul.menu李のA」）

$('ul.submenu li a').hover(function() { 

$(this).css({color:'#FFFFFF'}); 

}, 
function() { 

$(this).css({color:'#00FF00'}); 

}); 

すべてこれは正常に動作しますが、私はサブメニューメニューリターンを置くと、セレクタを変更元の色の状態に

。

私が欲しいのは、私はメニューにホバー状態のサブメニュー置くと、アクティブにもとどまることである。（mouseleaveは、メニュー上で活性化されるため、アウトホバー）私は多くのことを試してみましたしかし、すべて私に問題を与える、動作するものはCSSですが、私はdinamicallyもテキストの色を制御する必要があります。

作品CSS：

ul li:hover a { 
    color: #FFF; 
} 

（このCSSコードを、私はCSSでメニューの色を制御して、私はサブメニューを推移するとき、メニューがアクティブ状態のままですが、サブメニューはjqueryの.hoverで動作します） 。

誰でもお手伝いできますか？ありがとう！

HTMLメニュー：

<ul class="menu"> 

     <li><a href="#">text</a></li> 

     <li><a href="#">text</a> 

     <ul class="submenu"> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text</a></li> 
     </ul> 

     </li> 

     <li><a href="#">text</a> 

</ul> 

Answer 1

あなたはいくつかの他のLi、使用クラスを置くまで、現在の色を設定するためにホバーしたい場合。

CSS：

ul.submenu li a { color: #0f0; } 
ul.submenu li a.hovered { color: #fff; } 

JS：

$('ul.submenu li a').mouseover(function() { 
    if (!$(this).hasClass('hovered')) { 
     $('ul.submenu li a.hovered').removeClass('hovered'); 
     $(this).setClass('hovered'); 
    } 
}); 

私は私が正しくあなたを理解願っています。あなたのプロジェクトに幸運。

[編集]

HMああ、多分あなたは、あなたがサブメニューにオフに行くとき、それはそう、あなたの親李はあなたが出てマウス操作にもかかわらず、その色を失うべきではありませんします。そうであれば、同じ考え方が適用できます。マウスオーバーコードでメニュー項目のマウスオーバーを選択するだけです（メニューの上にマウスを移動すると他のすべてのメニューが設定されなくなります）。サブメニューのulの外にマウスを置くと、メニューのクラスの色が変わります。あなたのメニューが構造的にどのようなものかわからないので、このセレクタの動作するCSSについてコメントすることはできません。

ああ、最後に、サブメニューの強調表示を処理するためのCSSルールとサブメニューのホバーが必要です。

すっきりした答えに申し訳ありません...