[javaScript / jQuery] Problème de syntaxe

Bonjour à tous,

Voici mon problème :

J'ai réalisé deux div, l'une au dessus de l'autre, de façon à ce que lorsqu'on survol la première, celle-ci disparaît et laisse apparaître l'autre en dessous et le tout dans une transition d'opacité.
Pour ce qui est du fonctionnement de ces deux div, tout fonctionne impeccablement, mais là ou cela se complique, c'est lorsque dans la deuxième div j'ai des liens, alors au survol de ceux-ci, le script considère que je perds le survol et rejoue toute l'animation du début.

En somme :
J'ai une div1=couleur rouge et une div2=couleur verte (avec lien).
Au lancement de la page, div2 apparaît avec les liens.
Je survole la div2, rien ne se passe (normal) et je me déplace sur les liens (de div2).
Là le script considère que je ne suis plus sur la div2, donc une transition d'opacité s'effectue, la div2 disparaît laissant apparaître la div1, mais comme je survole la div1 alors il me joue la transition vers la div2 et je reviens sur le lien.
Même opération lorsque je quitte le survole des liens.

Voici le code HTML :

<div class="div1">ICI LE MENU B</div>
<div class="div2">
           <a href="#" class="lien">Lien</a>
</div>

Et le code JavaScript :

$(document).ready(function() {
  $(".div2").live('mouseover', function(e) {
    $(".div2").transition({ opacity: 1 }, 500);
  });
  $(".div2").live('mouseout', function(e) {
    $(".div2").transition({ opacity: 0 }, 500);
  });
});

Merci de votre aide, car cela fait plusieurs jours que je cherche !