Jquery父div隐藏逻辑在鼠标移出时隐藏子下拉菜单
Jquery父div隐藏逻辑在鼠标移出时隐藏子下拉菜单
提问于 2010-07-23 09:48:32
我有一排带有"itemcontainer“类的div，它们在鼠标悬停时显示一组动作图标。其中一个操作图标有一个下拉菜单，其中包含鼠标悬停时显示的绝对位置。我试图解决的挑战是，下拉菜单横跨在项目容器上，当您将鼠标向下移动到下拉菜单时，项目容器鼠标输出逻辑会启动并隐藏下拉菜单和项目容器。任何建议，请参阅下面的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
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2010-07-23 10:03:32
如果元素是子元素，您需要的是mouseenter和mouseleave事件，而不是mouseover和mouseout事件，这两个事件在从父元素到子元素时不会触发。
来自the mouseleave docs
mouseleave事件与mouseout的不同之处在于它处理事件冒泡的方式。如果在本例中使用了mouseout，则当鼠标指针移出内部元素时，处理程序将被触发。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开其绑定到的元素时才触发其处理程序，而不是子代。因此，在此示例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3314816
复制相关文章
相似问题
腾讯云开发者
