当不再悬停在fadeIn元素上时，如何保持元素可见？

Question

我有一个图像元素，它看起来像是在父级 div 内部，而实际上它位于其下方/外部。我目前正在使用 JQuery 来 fadeIn 将光标悬停在图像元素上并在光标移开时淡出。但是，当我尝试将鼠标悬停在现在可见的图像元素上时，它就会消失。目前无法在父 div 中移动图像元素。

Heres the JSFiddle 演示问题

当我将光标指向图像元素可见时，如何防止它淡出？

Answer 1

将链接添加到.hover() 选择器中：

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

之后，您需要使用.stop() 来防止排队：

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

然后你会在快速悬停div 时遇到错误，因为fadeIn() 仅在元素被隐藏时触发，所以使用fadeTo：

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

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