Question

我正在尝试在图像上创建一个图像库，当您悬停或鼠标悬停时，它将在图像上显示div，并且我在悬停功能上使用淡入/淡出功能。问题是当我悬停图像时它会自动淡入淡出。

我有这个用于悬停淡入/淡出的代码块：

$(".image").hover(function() {

    $(".hover-box").fadeIn({
        duration: 1000
    });

}, function() {

    $(".hover-box").fadeOut({
        duration: 1000
    });
});

我正在尝试解决我能做的事情，因此只有当鼠标悬停在图像上时才会淡入，然后在鼠标离开图像时淡出。我怎样才能实现它？

Answer 1

当你离开.hover-box而不是图像时，你应该隐藏.hover-box。

$("#back").mouseenter(function() {
   $("#front").fadeIn(1000); 
});

$("#front").mouseleave(function() {
 $("#front").fadeOut(1000);   
});

http://jsfiddle.net/s4uTM/

在jQuery中使用悬停功能在图像上显示div

1 个答案: