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（）应该涵盖两者，但是，我看到你的代码中没有错误，所以我不能提出比做我说的更多的建议。

悬停（mouseleave）方法不显示效果

1 个答案: