Javascript mouseenter（）悬停功能不起作用答案

【问题标题】：Javascript mouseenter() hover function not workingJavascript mouseenter（）悬停功能不起作用
【发布时间】：2013-11-02 00:00:18
【问题描述】：

我一直在尝试创建一种效果，将鼠标悬停在图像上，整个图像变白并带有文本，但我的代码无法正常工作，有人介意看看让我知道我一直在做什么错误的？ http://jsfiddle.net/MBsbj/

<div class="frontImages"><img class="alignnone size-full wp-image-24" alt="biryani sideimage" src="http://tandoorifreshonline.com.mlseo.net/wp-content/uploads/2013/11/biryani-sideimage.png"/>
<div class="hoverText">HOVER TEXT HERE</div>
</div>

    $('.frontImages').mouseenter(function(){
$('.hoverText').fadeIn();
});

.hoverText {
display:none; 
}

注意 - 此代码基于此线程：Show text when the cursor hovers over an image - 但是当我从答案中输入代码时，它似乎也不起作用。 http://jsfiddle.net/nMCbY/

谢谢！

【问题讨论】：

标签： javascript hover mouseover mouseenter mouseleave

【解决方案1】：

您的代码按原样运行，您只需在 JSFiddle 中添加对 jQuery 的引用即可使其正常运行。查看您更新的小提琴：http://jsfiddle.net/MBsbj/1/ 和 http://jsfiddle.net/nMCbY/1/

我还编辑了第二个小提琴以将标题放置在图像上，而不是通过添加：

caption.offset({ top: image.position().top })

见：http://jsfiddle.net/nMCbY/3/

【讨论】：

谢谢！它认为我正在处理的网站上的所有内容都是正确的，但看起来它仍然不适合我......你介意看看我是否做错了什么吗？ tandoorifreshonline.com.mlseo.net 目前首页上的所有图像都使用同一个类，因此将鼠标悬停在其中任何一个上应该会显示所有悬停文本 - 我稍后会修复它，但我想确保它首先工作。
我看了看，这行得通： jQuery('.frontImages').mouseenter(function(){ jQuery('.hoverText').fadeIn(); });要将 jQuery 绑定到 $，请参阅此答案：stackoverflow.com/a/6109983/849741
感谢您的浏览。这对我来说太奇怪了。我使用了你的代码，但它只有在我加载页面、进入 firebug 并添加或删除一些无关紧要的东西时才有效，比如额外的空间或代码中的一些东西。有什么理由这样做吗？非常感谢您的帮助。
您应该在准备好的文档中初始化代码（您之前在其中显示了 jQuery 加载警报。）像这样：jQuery( document ).ready(function() { jQuery('.frontImages'). mouseenter(function(){ jQuery('.hoverText').fadeIn(); }); });