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

如果元素是子元素，而不是mouseover和mouseout事件，则需要mouseenter和mouseleave事件，这些事件从父母发送时不会触发对孩子。

来自the mouseleave docs：

mouseleave事件处理事件冒泡的方式与mouseout不同。如果在此示例中使用mouseout，则当鼠标指针移出内部元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开绑定的元素而不是后代时触发其处理程序。因此，在此示例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序。

Jquery父div隐藏逻辑隐藏了mouseout上的子下拉菜单

1 个答案: