jQuery hover problem!

Question

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

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!

How can I make jQuery ignore a hover over the buttons?

Edit: 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...

Would you mind clarifying which elements on your example page should cause fadeIn/Out and which shouldn't? — Matt Ball
– Matt Ball, Commented Nov 5, 2009 at 18:16
I just want to try to help clarify what you are describing. When you go onto the graphic slide show (slider) 2 large < and > signs appear. But when you actually move your mouse on top of the signs they disappear. Correct? — Haydar
– Haydar, Commented Nov 5, 2009 at 18:34
It sounds like you would like the buttons to be visible - and not fade in or out - when the mouse is inside the container. Is that right? — Jeff Sternal
– Jeff Sternal, Commented Nov 5, 2009 at 18:39

Jeff Sternal · Accepted Answer · 2009-11-05 20:35:54Z

1

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;">

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

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.

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);

to

$(obj).append(html);

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.

edited Nov 5, 2009 at 20:35

answered Nov 5, 2009 at 18:45

Jeff Sternal

48.8k9 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Brown Over a year ago

That's freakin' awesome. Thanks a lot!

Jeff Sternal Over a year ago

Glad to hear it helps! Did you use the first or second solution? In retrospect, I realize the second solution is probably safest (at least without having reviewed the entire plugin source code). :)

Brandon Montgomery · Accepted Answer · 2009-11-05 18:22:56Z

0

My theory is that the mouseout and mouseover events are being fired one after the other when you mouse over a button. Stick and alert inside the hide and show functions and see if that's the case.

answered Nov 5, 2009 at 18:22

Brandon Montgomery

6,9853 gold badges50 silver badges71 bronze badges

Comments

Haydar · Accepted Answer · 2009-11-05 18:43:28Z

0

I'm going to take a stab and say that your mouse out event of the hover for your slider is firing because the < and > graphics are outside of the dive that defines slider. Have you tried putting those inside of the slider div?

answered Nov 5, 2009 at 18:43

Haydar

1,2923 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery hover problem!

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related