Javascript/jQuery Mouseover And Mouseout Event Listeners

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 gal

Solution 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();
}); 

Solution 2:

It would not flicker if your arrows are inside of your image container. Or maybe put the show arrow effect in the main gallery container. Basically when your mouse laves the image container, it will trigger the mouseout. When I say leave I mean in code sense, visually it does not leave because you have it positioned differently but in code sense, your mouse left the image container and entered the arrow containers

Solution 3:

This is how I interpreted your question without seeing any code.. Let me know.
I added colors to the divs so you can see which is located where.

jsFiddle: http://jsfiddle.net/z2Y8a/19/

<div id="galleryContainer" style="width:200px;height:200px;background:green;">
    <div id="imageContainer" style="width:50px;height:100px;background:blue;">
        <div style="height:75px;">
            <img src="img" />
        </div>
        <div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div>
        <div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div>
    </div>
</div>​

<script>
    $("#imageContainer").hover( function()
    {
        $("#leftArrow").toggle();
        $("#rightArrow").toggle(); 
    });​
</script>

-- EDIT --

$("#galleryContainer").hover(function()
{
    $("#leftArrow").toggle();
    $("#rightArrow").toggle();
});