0

我在主菜单中有一个嵌套的子菜单。当用户将鼠标悬停在主菜单项上时，图像会淡入并在悬停时淡出。子菜单也是如此。

我的问题是当我将鼠标悬停在其嵌套子菜单上时，主菜单项中的图像不会淡出。我试过使用.not()（例如：）.not('ul li')但没有效果。

当子菜单项悬停在上面时，我也尝试直接定位父项，也没有效果。（例如$(this).parent().parent().find("a").html();：）

有谁知道修改我的脚本的方法，以便将鼠标悬停在第一个菜单项上不会影响第二个嵌套项？

//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');
      }
    );

编辑：添加小提琴：

http://jsfiddle.net/veW7B/3/

在小提琴中 - 当子菜单悬停在我只想显示蓝色方块时，而不是两者

4

1 回答 1

2

您可以使用has()和not()来选择哪个 'li' 有孩子，哪个没有。

用于$('li').has('ul').hover()主 li，$("li:not(:has(ul))").hover()用于子菜单

我在这里更新了你的小提琴http://jsfiddle.net/veW7B/5/

于 2013-03-19T03:20:41.087 回答