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

【问题标题】：Displaying a div on a image with hover function in jQuery在jQuery中使用悬停功能在图像上显示div
【发布时间】：2014-08-01 23:24:57
【问题描述】：

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

我有这段代码用于悬停淡入/淡出：

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

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

}, function() {

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

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

【问题讨论】：

似乎对我有用。你能发布一个说明这个问题的小提琴吗？或者一些额外的代码，以便我们可以看到发生了什么？
我当然可以，但我想让你知道它会悬停我的问题是，当我将鼠标悬停时，我想要淡入和淡出它的 div 当我鼠标悬停时它会自动淡入和淡出图片

标签： javascript jquery hover

【解决方案1】：

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

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

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

http://jsfiddle.net/s4uTM/

【讨论】：

是的，它确实会淡出，因为鼠标离开 .image 是因为 .hover-box 与它重叠。 #back 是你的 .image ， #front 是你的 .hover-box ， .image 失去焦点， .hover-box 获得新焦点，因为它在它上面。祝你好运。
done sry mate :) 我对这个很陌生，呵呵，但感谢您的帮助 :) 非常感谢 :)