Jquery父div隐藏逻辑在鼠标悬停时隐藏子下拉菜单

Question

我有一排带有“itemcontainer”类的div，在鼠标悬停时显示一组动作图标。其中一个动作图标有一个下拉菜单，其绝对位置会在鼠标悬停时显示。我试图解决的挑战是下拉菜单跨越项目容器，当您将鼠标向下移动到下拉菜单时，itemcontainer mouseout 逻辑启动并隐藏下拉菜单和项目容器。任何建议，下面的jquery代码。

  $(".itemcontainer").live("mouseover", function () {
        $(this).addClass("selecteditemcontainer");
        $(this).find(".actioncontainer").show();

    }).live("mouseout", function () {
            $(this).removeClass("selecteditemcontainer");
            $(this).find(".actioncontainer").hide();

    });

    $(".dropdown").live("mouseover", function () {
        $(this).find(".submenu").slideDown("fast").show();
        $(this).parent().mouseout(function () {
        }, function () {
            $(this).parent().find(".submenu").slideUp('fast'); //When the mouse hovers out of the subnav, move it back up  
        });
    });

Answer 1

如果元素是子元素，您需要 mouseenter 和 mouseleave 事件，而不是 mouseover 和 mouseout 事件，这在从父节点到子节点时不会触发。

来自the mouseleave docs：

mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在本例中使用了mouseout，那么当鼠标指针移出Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave 事件仅在鼠标离开它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标离开 Outer 元素而不是 Inner 元素时触发处理程序。