Question

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

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

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

问题是，当你将鼠标悬停在一个按钮上时，它们会褪色/淡出！

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

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

我认为标记不容易改变......

Answer 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跨度是由滑块插件生成的。我没有机会重新获得整个插件代码，但看起来你可以通过改变easySlider1.7.js的第94行来摆脱

$(obj).after(html);

到

$(obj).append(html);

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

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

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

Answer 2

我的理论是当鼠标悬停在按钮上时，mouseout和mouseover事件会一个接一个地被触发。在隐藏和显示功能中粘贴并发出警报，看看是否属实。

Answer 3

我要采取刺戳并说你的鼠标停止滑块的事件是因为＆lt;和＆gt;图形位于定义滑块的潜水之外。你试过把那些放在滑块div里吗？

jQuery悬停问题！

3 个答案: