jQueryhover问题!
http://ftp.crashboxcreative.com/ftp/EastsideBaptist/EBC-Final/
我在使用简单的jquery show / hide效果时遇到了很多麻烦。
当您将鼠标hover在滑块上时,导航按钮会淡入。同样,它们会在mouseleave上淡出。
问题是,当你将鼠标hover在一个按钮上时,它们会出现淡入/淡出!
如何让jQuery忽略hover在按钮上?
编辑:只有hover在#slider上才会触发效果。 我正在使用这个插件: http : //cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
我认为标记不容易改变……
这些按钮不是滑块的子元素,即使它们位于其中:
所以当你的鼠标进入它们时它会离开$('#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(); });
没有测试,我不确定是否有任何闪烁,但它应该确保当鼠标hover在按钮上时按钮显示。
我的理论是当鼠标hover在按钮上时,mouseout和mouseover事件会一个接一个地被触发。 在隐藏和显示function内部粘贴并发出警报,看看是否是这种情况。
我将采取一个刺,并说你的鼠标停止滑块的事件是因为<和>图形超出定义滑块的潜水。 你试过把那些放在滑块div里面吗?