jQuery 悬停问题！答案

【问题标题】：jQuery hover problem!jQuery 悬停问题！
【发布时间】：2009-11-05 18:11:58
【问题描述】：

http://ftp.crashboxcreative.com/ftp/EastsideBaptist/EBC-Final/

我在使用简单的 jquery 显示/隐藏效果时遇到了很多麻烦。

当您将鼠标悬停在滑块上时，导航按钮会淡入。同样，它们会在鼠标离开时淡出。

问题是，当您将鼠标悬停在按钮上时，它们会淡入/淡出！

如何让 jQuery 忽略鼠标悬停在按钮上？

编辑：只有将鼠标悬停在#slider 上才会触发效果。我正在使用这个插件：http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

我不认为标记可以轻易更改...

【问题讨论】：

您介意澄清一下示例页面上的哪些元素应该导致淡入/淡出，哪些不应该？
我只是想帮助澄清您所描述的内容。当您进入图形幻灯片放映（滑块）时，会出现 2 个大的符号。但是，当您实际将鼠标移到标志上时，它们就会消失。对吗？
当鼠标在容器内时，听起来您希望按钮可见 - 而不淡入或淡出。对吗？
马特：已编辑。海达尔：是的。杰夫：是的。

标签： jquery

【解决方案1】：

按钮不是滑块的子元素，即使它们位于滑块内：

<div id="slider" style="overflow: hidden; width: 620px; height: 330px;">
    <div id="slider_overlay"></div>
    <ul style="width: 3100px; margin-left: -620px;"></ul>
</div>
<span id="prevBtn" style="display: none;">
    <a href="javascript:void(0);">Previous</a>
</span>
<span id="nextBtn" style="display: none;">

因此，当您的鼠标进入它们时，它会离开$('#slider')，从而触发此处指定的out 回调：

var buttons = $('#prevBtn,#nextBtn');
var hide = function () { buttons.stop(true, true).fadeOut(); }
var show = function () { buttons.stop(true, true).fadeIn(); }
$("#slider").hover(show, hide);//show/hide buttons

我建议将上一个和下一个按钮（跨度）移动到滑块 div 中，以便它们在 DOM 中真正成为其子元素，而不仅仅是看起来是子元素。

编辑：我没有意识到 prevBtn 和 NextBtn 跨度是由滑块插件生成的，d'oh。我还没有机会重新阅读整个插件代码，但看起来你可以通过从

更改easySlider1.7.js的第94行而侥幸逃脱

$(obj).after(html);

到

$(obj).append(html);

因为这会将它们插入到滑块 div 中。如果这有不良副作用或仍然不起作用，您可以将其添加到您的$(document).ready()：

$("#prevBtn,#nextBtn").hover(function() { buttons.stop(true, true).show(); });

没有测试它，我不确定是否有任何闪烁，但它应该确保当鼠标悬停时按钮显示出来。

【讨论】：

这太棒了。非常感谢！
很高兴听到它有帮助！您使用的是第一种还是第二种解决方案？回想起来，我意识到第二种解决方案可能是最安全的（至少在没有查看整个插件源代码的情况下）。 :)

【解决方案2】：

我的理论是当您将鼠标悬停在按钮上时，mouseout 和 mouseover 事件会一个接一个地触发。在 hide 和 show 函数中粘贴并警告，看看是否是这种情况。

【讨论】：

【解决方案3】：

我要说一下，您的滑块悬停的鼠标移出事件正在触发，因为图形位于定义滑块的潜水之外。您是否尝试过将它们放在滑块 div 中？

【讨论】：