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.

Solution 1

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.

Solution 2

use mouseenter and mouseleave instead of mouseover and mouseout

Solution 3

Here you have html code:

<ul class="buttons">
                    <li>
                        <h2>
                            <a class="koeriersdiensten" href="pagina.html" title="Koeriersdiensten">Koeriersdiensten
                                <span>Lorem ipsum dolor sit amet</span>
                            </a>
                        </h2>
                    </li>
                    <li>
                        <h2>
                            <a class="taxivervoer" href="pagina.html" title="Taxivervoer">Taxivervoer
                                <span>Lorem ipsum dolor sit amet</span>
                            </a>
                        </h2>
                    </li>
                </ul>