当将鼠标移出两个div时隐藏div，但如果将鼠标悬停在一个或另一个上则不隐藏

Question

I have a two div with two id :

<div id="somediv">
many Content
</div>
<div id="result></div>

i want to make something like that :

$("#somediv").bind("mouseleave",function(){
$('#result').fadeOut();
});
$("#result").bind("mouseleave",function(){
$('#result').fadeOut();
});

But i don't want that result dissapears if if move my mouse on the other div. Is there a way to say : hide a div, when mouseout two divs, but not if you are hover one or another ? The divs are not exactly superposed in the page. But They've got a common area.

Any ideas?

Answer 1

Try:

$("#somediv,#result").mouseenter(function(){
    $('#result').stop().fadeOut();
}).mouseleave(function(){
    $('#result').stop().fadeIn();
});

Another thing you can do is wrap both divs by another div such as:

<div id="container">
    <div id="somediv">
        Many Content
    </div>
    <div id="result"></div>
</div>

and set the event on the parent:

$('#container').mouseenter(function(){
    $('#result').stop().fadeIn();
}).mouseleave(function(){
    $('#result').stop().fadeOut();
});