1

親メニューにカーソルを合わせるとドロップダウンメニューを表示するメガメニューがあり、ドロップダウンサブメニューにカーソルを合わせると、それぞれのメニュー関連情報がクラスのコンテナdivに表示されますdd-panel

ホバー時のサブメニューの背景色を緑に変更しています。この特定のメニューのテキストまたは画像の上にカーソルを移動しても、緑のままにしたいです。

また、親メニュー要素にカーソルを合わせると、デフォルトとしてドロップダウン ul li の最初の要素を選択/表示することにも気付くでしょう。

画像またはテキストの上にカーソルを置いたときに、アクティブなメニューの背景色/前景色を緑/白にします。

フィドルのリンク

次のjqueryを使用して、テスト用にフォントの色を黄色に保ち、機能するかどうかを確認しようとしました。しかし、それは機能しません。

$(".dd-panel").hover(function() {
    $(this).closest("a").toggleClass("menuActive")
});

ホール メガ メニューの概要。メニューの機能を現在のフィドルに似たものにしたいのですが、コーディングへのより専門的なアプローチをいただければ幸いです。私はデザイナーやjqueryユーザーの専門家ではなく、バックエンド開発者であるため、これまでスタックユーザーの助けを借りて管理しました。したがって、この点に関するヘルプは大歓迎です。

アップデート：

私が$(this).parent(".dropdown ul li").css("border", "2px red solid"); それを使用すると、機能し、退屈なものが追加されます

しかし、私がそれを使用 $(this).parent(".dropdown ul li a").css("color", "red");するときは仕事をしません

4

1 に答える 1

1

あなたのタグはあなたの親タグではなく、<a>あなたの兄弟タグです。.dd-panel

これを試してください：

$(".dd-panel").hover(function() {
    $(this).prev("a").toggleClass("menuActive");
});

これにより、クラスが正しく切り替えられます。

これが、機能する理由と機能しない理由でもあり$(this).parent(".dropdown ul li").css("border", "2px red solid");ます$(this).parent(".dropdown ul li a").css("color", "red");。

于 2013-10-13T12:30:14.417 に答える