Mouseover and Mouseout function jQuery

Question

I have this script:

$("#teaser ul.buttons li").mouseover(function()
    {
        $("a",this).animate({ left: '0' },350);
    }).mouseout(function()
    {

        $("a",this).animate({ left: '-11px' },350);
    });

But when i now hover over the a element. The mouseover and mouseout going continu. How can i change this script. That when i hover of the a element. That the mouseout launch when i hover off the element.

Answer 1

use mouseenter and mouseleave instead of mouseover and mouseout

Answer 2

Is http://jsfiddle.net/BBUJ7/ what you are looking for? I changed the mouseover and mouseout to hover since you mentioned hovering in the question and added a {position:relative} CSS rule.