How can I keep element visible when not hovering on fadeIn element any longer?

Question

I have an image element that looks like it is inside a parent div when it is actually underneath/outside it. I'm currently using JQuery to fadeIn the image element when the cursor is hovered over it and fadeout when the cursor moves away. But when I attempt to hover over the now visible image element it disappears. Moving the image element inside parent div isn't an option at the moment.

Heres the JSFiddle demonstrating the issue

How can I prevent it from fading out when I point the cursor on the image element when it becomes visible?

Answer 1

Add the link into the .hover() selector :

$('.container, .link').hover(...);

After that, you'll need to use .stop() to prevent the queuing :

$('.container, .link').hover( function (){
    $('.link').stop().fadeIn();
}, function(){
    $('.link').stop().fadeOut();
});

Then you'll have a bug when fast-hovering the div because fadeIn() only proc when element is hidden so use fadeTo:

$('.container, .link').hover( function (){
    $('.link').stop().fadeTo('slow', 1);
}, function(){
    $('.link').stop().fadeTo('slow', 0);
});

http://jsfiddle.net/ST7jp/4/