jQuery child element mouseenter mouseleave

Question

Here is the example: http://jsfiddle.net/FdT23/4/

The goal is that when you hover your mouse over the black box, the gray rectangle on the bottom will fadeIn and when you mouse out, the rectangle with fadeOut. But if I mouseover the gray rectangle, it disappears. I want it to stay visible.

Please assist.

score 3 · Accepted Answer · answered Jun 18 '12 at 15:21

3

Use .mouseleave instead

$(document).ready(function(){

    $('#box').mouseenter(function(evt){

        $('#rect').fadeIn(300);

    });

   $('#box').mouseleave(function(evt){

        $('#rect').fadeOut(300);

    });

});

Updated JSfiddle http://jsfiddle.net/FdT23/5/

answered Jun 18 '12 at 15:21

Nicolás Torres

1,385
8
13

In my case I had to set the z-index of the child element to 1, because it was absolutely positioned. Don't know why, 'cause this aways holds true. – Peter Ehrlich Feb 09 '13 at 23:56

score 0 · Answer 2 · answered Jun 18 '12 at 15:36

0

try this demo

Hope it helps. Used .hover instead.

answered Jun 18 '12 at 15:36

KiiroSora09

2,247
18
21

jQuery child element mouseenter mouseleave

2 Answers2