Question

Not sure how to solve an issue I’m having at the moment. I’m building a Javascript and PHP powered image gallery. The basic div structure is that I have a div that contains the gallery as a whole, one for the image being displayed, and a div containing a “previous button”, and another containing a “next button.”

The next/previous buttons are positioned on the left/right side at the bottom of the image container div (the gallery container is set to relative position, the button divs to absolute). By default they are made non-visible using jQuery, and become visible when you hover over the image container div. The issue I’m having is when you hover over the container div, and then over the arrows, the transition effect re-plays and I’m not sure how to fix that using HTML/CSS/JS. My current structure for the divs is

<div id="galleryContainer">
  <div id="imageContainer">
    <img src="img" />
  </div>
  <div id="leftArrow"></div>
  <div id="rightArrow"></div>
</div>

How do I make it so my fadein/out effect stops acting all bugged when I hover over the next/prev buttons? I’ve tried a bunch of combinations of using “onmouseover” listeners when I establish the div, to using jQuery listeners, to trying to change up the hierarchy of the drivs. Any help would be appreciated!

Edit: Here is my current jQuery code of what I’m trying to do:

$(document).ready(function(){

$("#imageContainer").mouseover(function()
{
    $("#leftArrow").fadeIn();
    $("#rightArrow").fadeIn();
});

$("#galleryContainer").mouseout(function()
{
    $("#leftArrow").fadeOut();
    $("#rightArrow").fadeOut();
}); 
});

When I put the buttons inside of the imageContainer it still does the fade bug/effect.

Answer 1

You probably want to use $.mouseleave and $mousenter A problem is that the mouseout and mouseover events bubble. Then, your handlers are called when those events are fired on #galleryContainer when it happens in any of its descendants

http://jsfiddle.net/z2Y8a/20/

$("#imageContainer").mouseenter(function() {
    $("#leftArrow").fadeIn();
    $("#rightArrow").fadeIn();
});

$("#galleryContainer").mouseleave(function() {
    $("#leftArrow").fadeOut();
    $("#rightArrow").fadeOut();
});