Question

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

我的问题是当我将鼠标悬停在嵌套子菜单上时，主菜单项中的图像不会淡出。我尝试过使用.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/

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

Answer 1

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

使用$('li').has('ul').hover()作为主要li，并使用$("li:not(:has(ul))").hover()作为子菜单

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

Jquery：当主菜单悬停时，子菜单项上出现停止效果

1 个答案: