jQuery悬停问题！ [英] jQuery hover problem!

问题描述

http://ftp.crashboxcreative.com/ftp/EastsideBaptist/EBC-最终/

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

I'm having a lot of trouble with a simple jquery show/hide effect.

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

When you hover over the slider, nav buttons fade in. Likewise, they fadeout on mouseleave.

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

The problem is, they fadein/fadeout when you hover over a button!

如何让jQuery忽略按钮上的悬停?

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

Only hover on the #slider should trigger an effect. I'm using this plugin: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

我认为标记不能轻易更改...

I don't think the markup can be easily changed...

推荐答案

按钮即使位于滑块中，也不是滑块的子元素:

The buttons are not child elements of the slider even though they are positioned within it:

<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回调:

So when your mouse enters them it's leaving $('#slider'), triggering the out callback specified here:

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中的真正子元素，而不仅仅是看起来是子元素.

I recommend moving the previous and next buttons (spans) into the slider div, so that they are truly its children in the DOM instead of only appearing to be child elements.

编辑:我不知道prevBtn和NextBtn跨度是由滑块插件d'oh生成的.我还没有机会重新获得整个插件代码，但是看来您可以摆脱对easySlider1.7.js的94行进行修改的方式

Edit: I didn't realize the prevBtn and NextBtn spans were generated by the slider plugin, d'oh. I haven't had the chance to reivew the entire plugin code, but it looks like you might be able to get away with changing line 94 of easySlider1.7.js from

$(obj).after(html);

到

$(obj).append(html);

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

Since that would insert them inside the slider div. If that has undesirable side effects or it still doesn't work, you might just add this to your $(document).ready():

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

未经测试，我不确定是否有闪烁，但应确保当鼠标悬停在按钮上时按钮会显示.

Without testing it, I'm not sure if there's any flicker, but it should ensure the buttons are showing when the mouse is over them.

这篇关于jQuery悬停问题！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！