2009-04-07 14 views
5

Ich habe einige html, die wie folgt aussieht:jQuery Hover() funktioniert nicht mit absolut positionierten Elementen und Animation

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

Und ich habe ein jquery Event auf dem Anker-Tag registriert:

$('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'); 
    } 
); 

Wenn ich mit der Maus über den Anchor-Tag gehe, wird der span.text angezeigt und der Anker 5px nach rechts verschoben.

Nun, aufgrund von Komplikationen, die ich nicht gerne habe, muss ich Position setzen: relativ; Klicken Sie auf den Container und positionieren Sie das Symbol und den Text so, dass das Symbol links und der Text rechts angezeigt wird.

DAS PROBLEM:

Wenn ich die Maus über den Anker-Tag, das Symbol rechts bewegt und die Maus endet über Oberseite des Textes nach oben (was angezeigt wird). Leider wird die 'out'-Funktion aufgerufen, wenn ich meine Maus vom Symbol zum Text bewege und die Animation wie verrückt beginnt. Ich verstehe nicht, was das "out" -Ereignis auslöst, da die Maus niemals das Anker-Tag verlässt.

Danke!

Antwort

13

Statt schweben können Sie die „MouseEnter-“ verwenden und „mouseleave“ Ereignisse, die nicht ausgelöst, wenn untergeordnete Elemente in die Quere kommen:

$('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'); 
}); 
+1

Aaah, danke. Lösung für mein Problem zumindest ;-) +1! –

+0

Ich habe ähnliche Situation und diese Lösung funktioniert nicht für mich in IE8. Irgendwelche Ideen/Vorschläge? – mohang

Verwandte Themen