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.

Answer 1

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/

Answer 2

try this demo

Hope it helps. Used .hover instead.