Наведите указатель мыши на изображение, чтобы отобразить кнопки и не срабатывать при наведении курсора на настоящие кнопки

Я пытаюсь заставить кнопки появляться при наведении курсора на изображение. Следующие действия работают:

    jQuery('.show-image').mouseenter(function() {
 jQuery('.the-buttons').animate({
  opacity: 1
 }, 1500);
}).mouseout(function() {
 jQuery('.the-buttons').animate({
  opacity: 0
 }, 1500); 
});

Однако при переходе от изображения к кнопке (которая находится над изображением) срабатывает mouseout / mouseenter, поэтому кнопки исчезают, а затем снова появляются (кнопки имеют тот же класс, что и изображение, иначе они будут просто блеклыми). Как я могу предотвратить это срабатывание? Я также пробовал приведенный выше код, используя jQuery hover; те же результаты. Вот деталь изображения, показывающая кнопку с непрозрачностью 1 (потому что я нахожусь над изображением):

http://i.stack.imgur.com/egeVq.png

Заранее благодарим за любые предложения.