jQuery mouse event handling

I have following code:

HTML:

<div class="one">Content</div>
<div class="two">Content</div>

I want to hide my second div when mosueleave event happen from first d开发者_如何学Civ and also the mouse don't have over second div.

Algorithm:

if ((mouseleave from div.one) && (mouse not on div.two))
     hide (div.two);

How can I implement this snippet using jquery? please help me.

You can set a flag on the .two div that keeps track of the mouseover state. Then when the mouse leaves .one you check for this state and if it exists you hide the div. Like so:

$(".two").live("mouseenter", function(){
    $(this).data("hover", true);
}).live("mouseleave", function(){
    $(this).removeData("hover");
});

$(".one").live("mouseleave", function(){
  if( !$(".two").data("hover") ) $(".two").hide();
});

enclose both divs in another, say, div class='zero'. so you would have something in your $(document).ready() like

$('.zero').live('hover', function() {
  $('.two').show();
});

$('.zero').live('blur', function() {
  $('.two').hide();
});

note: you must style="display: none" for div class='two' by default