mouseenter/mouseleave being affected by nested child objects

问题

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.

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.

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?

Thanks in advance.

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

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

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

回答1:

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();
    }
});

回答2:

I had to resort to lots of ugly hacks to get this type of thing to work. And it was browser-specific hacks, too. In my case, I had iframe elements in my nested elements.

I had to use delays/timeouts, get the (x,y) position of the mouse, and respond to mousemove events.

Basically, you have to keep checking on regular intervals until mouse is outside bounding area, and then remove element.

I used a fade out effect to remove element to make lag time a little more unnoticeable.

See it in action by hovering of Facebook 'f' icon in top right corner: http://www2.highpoint.edu/

回答3:

you can use jquery hover function to overcome the issue...

http://api.jquery.com/hover/

It basically handles the problem you are currently facing. Use the following piece of code

 $("div#myNestContainer").hover( 

    function () {
     $("div#myNestContainer").show(); 
    },

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

来源：https://stackoverflow.com/questions/8419273/mouseenter-mouseleave-being-affected-by-nested-child-objects

标签

jquery

mouseenter

mouseleave