Fade in/out an element in a div with mouse over/out of div

Question

sorry for the stupid title, I couldn't think of anything else, and I'm sorry if someone already asked this, I couldn't find it.

Anyway, I'm making a gallery with jQuery. I have a div and a picture and previous/next buttons inside that div. The buttons are positioned over the picture and I want them to be hidden by default, to fade in when I move mouse over the div, and fade out when I move mouse out of the div. The problem is when I move mouse from the picture to a button, javascript registers that as the mouseout event, even though I didn't actually leave the div which holds the picture and buttons. I made a quick fiddle to show you what is going on: http://jsfiddle.net/7Ppbm/

Does anyone have a solution to this problem? Thanks

Answer 1

You should use the hover function:

$("#button").hide();

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});