CODEWITHSUNDEEP
javascriptjqueryhtmlmouseevent
thecodeparadox
thecodeparadox

Reputation: 87073

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 div 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.

Upvotes: 0

Views: 487

Answers (2)

Kit Sunde
Kit Sunde

Reputation: 37055

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

Upvotes: 2

Alex R.
Alex R.

Reputation: 4754

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

Upvotes: 1

Related Questions