JQuery onmouseover + onmouseout / hover on two different divs

Question

I have a problem:

Here is part of my HTML:

<div id="div_1"> Here Hover </div> <div id="div_2"> Here content to show </div> 

And here is part of my jQuery Script:

 jQuery('#div_2').hide(); jQuery('#div_1').onmouseover(function() { jQuery('#div_2').fadeIn(); }).onmouseout(function(){ jQuery('#div_2').fadeOut(); }); 

Problem:

If I hover over div_1, div_2 is displayed, if I am, div_2 is hidden, but:

If I attack div_1 first and then go div_2, div_2 will quickly hide.

I tried this with jQuery.addClass (); after mouseout in div_1, but nothing changes.

I do not want to make the second div in the first div ... Is there any other way with jQuery?

thanks Ahmet

Answer 1

Here's a different approach, just apply the hover to the second div so that it doesn't hide itself:

 $(function() { $('#div_2').hide(); $('#div_1, #div_2').hover(function() { $('#div_2').stop().fadeIn(); }, function(){ $('#div_2').stop().fadeOut(); }); }); 

Answer 2

The mouseleave function may be what you are looking for.

Answer 3

The easiest way to do this is to place both <div> inside the third <div> container, and then apply the hover effect to the <div> container.

By the way, you should use shorthand hover to add handlers.

Answer 4

Try using hover () instead of mouseover () and mouseout ().

Check out this documentation page: http://api.jquery.com/hover/

Hope this helps.

Answer 5

Add a mouseover handler to #div_1 and a mouseout handler to #div_2 . That way, #div_2 displayed when you hover over #div_1 , and it is hidden when you press #div_2 (and not immediately as soon as you press #div_1 ). The only real drawback to this is that in order to hide the second div, you must first hover it over it.

Something like that:

 jQuery('#div_2').hide(); jQuery('#div_1').mouseover(function() { jQuery('#div_2').fadeIn(); }); jQuery('#div_2').mouseout(function(){ jQuery('#div_2').fadeOut(); }); 

Answer 6

Try this code:

 $(function() { jQuery('#div_2').hide(); jQuery('#div_1').mouseover(function() { jQuery('#div_2').fadeIn(); }); jQuery('#div_2').mouseout(function(){ jQuery('#div_2').fadeOut(); }); });