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

Answer 1

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.

Answer 2

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?

Answer 3

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.