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

Hover (mouseleave) method not showing effects

本文关键字：显示 方法 鼠标 离开 悬停      更新时间：2023-09-26

我有一系列图像，当悬停在它们上面时会改变它们的图像，在悬停期间还有一个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方法中，叠加层会立即消失，淡入淡出效果不起作用！这段代码有什么问题？

我知道

这可能有点麻烦，但是您是否尝试过将它们分成一个mouseenter（）函数和另一个mouseleave（）？我知道 hover（） 应该涵盖两者，但是，我在您的代码中没有看到任何错误，所以我只能提出比我所说的更多建议。

相关文章：