jQuery onmouseover + onmouseout / hover on two different divs

Question

I've got a Problem:

Here a part of my HTML:

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

And here a part of my jQuery Script:

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

The Problem:

If i hover on the div_1, the div_2 is shown, if i hover out, the div_2 is hidden, but:

If i hover first on div_1 and then go over div_2, the div_2 is hidden fast.

I've tried this with jQuery.addClass(); after mouseout in div_1, but nothing is changing.

I dont want do make the second div in the first div... Is there another way with jQuery?

Thx Ahmet

To start you off, you need to lose the `on` prefix to the mouseover/mouseout event handlers. It's just `jQuery('#div_1').mouseover(function(){...` — karim79, Mar 08 '10 at 20:30
By the way, you should use the `hover` shorthand to add the handlers — SLaks, Mar 08 '10 at 20:36

score 14 · Answer 1 · answered Mar 08 '10 at 23:31

14

Here's another approach, just apply the hover to the second div as well so it stops itself being hidden:

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

answered Mar 08 '10 at 23:31

Nick Craver

623,446
136
1,297
1,155

When I have done this in the past, it can leave subsequent fade-in events fading to only partial opacity. Instead, I use http://api.jquery.com/fadeTo/ which lets me specify 0 and 1 for the opacity. – Nick White Oct 02 '12 at 05:34

score 2 · Answer 2 · answered Nov 24 '10 at 23:25

2

The mouseleave function might be what you are looking for.

answered Nov 24 '10 at 23:25

Roch

21,741
29
77
120

score 0 · Answer 3 · answered Mar 08 '10 at 20:30

0

The simplest way to do this is to put both <div>s inside a third container <div>, then apply the hover effect to the container <div>.

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

answered Mar 08 '10 at 20:30

SLaks

868,454
176
1,908
1,964

There are more then 1 Div wich are showing different content in the other div, on mouse over, (ajax) so i try to just work with one div – ahmet2106 Mar 08 '10 at 20:34

score 0 · Answer 4 · answered Mar 08 '10 at 20:36

0

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

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

Hope this helps.

answered Mar 08 '10 at 20:36

Raja

3,608
3
28
39

score 0 · Answer 5 · answered Mar 08 '10 at 20:42

Add the mouseover handler to #div_1, and the mouseout handler to #div_2. This way, #div_2 is shown when you mouseover #div_1, and it is hidden when you mouseout of #div_2 (instead of as soon as you mouseout of #div_1). The only real drawback to this is that in order to hide the second div, you must mouseover it first.

Something like this:

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

score 0 · Answer 6 · edited Jun 11 '11 at 08:47

0

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

edited Jun 11 '11 at 08:47

DarthJDG

16,511
11
49
56

answered Jun 10 '11 at 10:22

Jafar Khan

1

1

good idea, dont thought about that :-) If I need it again, I can try this :-) thanks! – ahmet2106 Jun 11 '11 at 12:15

jQuery onmouseover + onmouseout / hover on two different divs

6 Answers6

Linked