Estou tentando fazer com que os botões apareçam ao passar o mouse sobre uma imagem. Os seguintes trabalhos:

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

No entanto, ao passar da imagem para o botão (que está sobre a imagem), o mouseout / mouseenter é acionado, para que os botões desapareçam e voltem a aparecer (os botões têm a mesma classe da imagem, caso contrário, eles permanecem desbotados Fora). Como posso impedir que isso seja acionado? Eu também tentei o código acima usando o hover do jQuery; mesmos resultados. Aqui está um detalhe da imagem mostrando o botão com opacidade 1 (porque estou sobre a imagem):

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

Agradecemos antecipadamente por todas as sugestões.