我有一系列图像，当它们悬停在它们上时会改变它们的图像，并且在悬停期间还会在图像上显示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方法中的叠加立即消失，淡入淡出效果不起作用！这段代码有什么问题？
1 回答
我知道这可能有点麻烦，但你尝试将它们分成一个mouseenter（）函数而另一个是mouseleave（）吗？我知道hover（）应该涵盖两者，但是，我看到你的代码中没有错误，所以我不能提出比做我说的更多的建议 .