mouseenter / mouseleave受嵌套子对象的影响 [英] mouseenter/mouseleave being affected by nested child objects

问题描述

我正在准备文档中隐藏控制面板（ myNestContainer ）。我有一个名为 navMyNest 的按钮，当 mouseenter 出现时，显示 myNestContainer 。这很好用。

I am hiding a control panel (myNestContainer) on document ready. I have a button called navMyNest that when mouseenter occurs, shows the myNestContainer. This works fine.

问题在于我希望用户能够探索控制面板，但是假设 myNestContainer中有嵌套的DIV容器，一旦输入， mouseleave 生效，控制面板关闭。

The issue is that I want the user to be able to explore the control panel, however given there are nested DIV containers in the myNestContainer, as soon as one is entered, the mouseleave take effect and the control panel closes.

这比 mouseenter / mouseout 好多了，但仍然没有我想要的功能。

This is working much better then mouseenter/mouseout, but still don't have the functionality I'd like.

有关如何覆盖子对象的任何想法，以便控制面板在用户查看时保持打开状态？

Any thoughts on how to overrided the child objects so that the control panel stays open while the user is look through it?

提前致谢。

$(document).ready(function() {
$("div#myNestContainer").hide();
});

$("div#navMyNest").live("mouseenter", function(event) {
    $("div#myNestContainer").show();
});

$("div#myNestContainer").live("mouseleave", function(event) {
    $("div#myNestContainer").hide();
});

推荐答案

使用 event.relatedTarget 如果鼠标移动到嵌套元素，则保持父元素可见。

Use event.relatedTarget to keep the parent element visible if the mouse moves to the nested element.

$('#myNestContainer').mouseout(function(e)
{
    var evt = e || window.event;
    if (evt.relatedTarget != document.getElementById('navMyNest'))
    {
        $("#myNestContainer").hide();
    }
});

这篇关于mouseenter / mouseleave受嵌套子对象的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！