プライマリメニュー内にネストされたサブメニューがあります。ユーザーがメインメニュー項目にカーソルを合わせると、画像がフェードインし、ホバーアウトするとフェードアウトします。サブメニューでも同じことが起こります。
私の問題は、ネストされたサブメニューにカーソルを合わせても、プライマリメニュー項目の画像がフェードアウトしないことです。.not()
(例:)を使用してみ.not('ul li')
ましたが、効果がありません。
また、サブメニュー項目にカーソルを合わせたときに親項目を直接ターゲットにしてみましたが、効果はありませんでした。(例$(this).parent().parent().find("a").html();
:)
最初のメニュー項目にカーソルを合わせても2番目のネストされた項目に影響しないように、スクリプトを変更する方法を知っている人はいますか?
//FADE SUB MENU IMAGES
$("#menu > ul > li > ul > li").hover(
function () {
var linktext = $(this).find("a").html();
$('img[alt="' + linktext + '"]').stop().fadeIn('100');
//FADEOUT PRIMARY MENU ITEM IMAGE
var linktexttop = $(this).parent().parent().find("a").html();
$('img[alt="' + linktexttop + '"]').stop().fadeIn('100');
},
function () {
var linktext = $(this).find("a").html();
$('img[alt="' + linktext + '"]').fadeOut('100');
}
);
編集:フィドルを追加:
フィドルで-サブメニューにカーソルを合わせると、青い四角だけが表示され、両方は表示されません