I'm running into an issue here. I have div#top-products, which contains a slideshow. Outside that div I have two ids: #prevBtn, and #nextBtn. These buttons are the controls for the slideshow. They have been set to display: none and they are positioned inside the #top-products div using absolute positioning. 

```
<div id="top-products"></div>
<div id="prevBtn"></div>
<div id="nextBtn"></div>

```

I want the buttons to show as soon as my mouse goes over div#top-products and disappear when I my mouse goes outside the div. 

I got the buttons to appear as soon as my mouse goes over the #top-products area

```
$("#top-products").mouseover(function() {
    $("#prevBtn, #nextBtn").show();
  });
  $("#top-products").mouseout(function() {
    $("#prevBtn, #nextBtn").hide();
  });

```

The problem now is that as soon as my mouse goes over any of the buttons they start going on and off repeatedly. I can see it on firebug toggling between display none and display block.

Any suggestions?

Here is how it behaves: <http://neolamanite.com/sites/all/themes/test/slider/home-page.html>