jQuery hover() non funziona con gli elementi posizionati in modo assoluto e di animazione

Question

ho un po 'html che assomiglia a questo:

<a href="#" class="move"><span class="text">add</span><span class="icon-arrow"></span></a> 

e ho un evento jQuery registrato sul tag di ancoraggio:

$('a.move').hover(
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '5px'}, 'fast'); 
    }, 
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '0px'}, 'fast'); 
    } 
); 

Quando passo il mouse sul tag di ancoraggio, visualizza span.text e sposta l'ancoraggio di 5 px a destra.

Ora, a causa di complicazioni a cui non ho voglia di entrare, devo impostare la posizione: relativa; sul contenitore e posizionare assolutamente l'icona e il testo in modo che l'icona appaia a sinistra e il testo a destra.

IL PROBLEMA:

Quando ho mouse sopra il tag di ancoraggio, l'icona si sposta a destra, e il mouse finisce per sopra la parte superiore del testo (che appare). Sfortunatamente, la funzione 'out' viene chiamata se sposto il mouse dall'icona al testo e l'animazione inizia a girare come un matto. Non capisco cosa stia causando l'evento "out", in quanto il mouse non lascia mai il tag di ancoraggio.

Grazie!

Answer 1

Invece di hover è possibile utilizzare il "MouseEnter" e gli eventi "mouseLeave", che non viene generato quando elementi figlio ottenere nel modo:

$('a.move').bind('mouseenter', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '5px'}, 'fast'); 
}) 
.bind('mouseleave', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '0px'}, 'fast'); 
});