悬停（鼠标离开）方法不显示效果

Question

我有一系列图像，它们在悬停时会改变它们的图像，并且在悬停期间在图像上还有一个 div 动画（作为叠加层）。

代码如下：

// hide overlays
$(".mini-shop .item .image a div").hide();

// toggle overlay and second image
$(".mini-shop .item .image").hover(
    function() {
        $img = $(this).find('a img');
        $img.stop().hide();
        var src = $img.attr('src');
        $img.attr('src', $img.attr('data-csrc'));
        $img.stop().fadeIn(300);
        $img.attr('data-csrc', src);
        $(this).find('a div').stop().animate({
            'top': '80%'
        }, 300).css('display', 'block');
    },
    function() {
        $img = $(this).find('a img');
        $img.stop().fadeOut(100);
        var src = $img.attr('src');
        $img.attr('src', $img.attr('data-csrc'));
        $img.stop().fadeIn(300);
        $img.attr('data-csrc', src);
        $(this).find('a div').stop().animate({
            'top': '100%'
        }, 300).css('display', 'none');
    }
);

我的问题是，只有第一个函数（mouseenter）中的效果有效，而在 mouseleave 方法中，覆盖立即消失，淡入淡出效果不起作用！这段代码有什么问题？

Answer 1

我知道这可能有点麻烦，但是您是否尝试过将它们分成一个 mouseenter() 函数和另一个 mouseleave()？我知道 hover() 应该涵盖两者，但是，我在您的代码中没有看到任何错误，所以我只能按照我所说的去做。