hover over div to reveal link, but can't click on link

I have created 2 lists, one is a list of buttons, the other is a list of links that are hidden off the page. When I hover over a button, one of the list items animates to fly in from the left side of the page. This all works fine, the problem I'm having is that to click on the link I have to move my mouse away from the button which retracts the link again. Can anyone suggest a cleverer way of achieving what I'm after. See this JS fiddle for reference:

http://jsfiddle.net/YyEJf/

jQuery code is below:

jQuery(document).ready(function() {
jQuery("li.fbtrig").hover(
    function(){
       jQuery("li.facebook").animate({'left': '130px'},400);

    },
    function(){
        jQuery("li.facebook").animate({'left': '0px'},400).once();
    }
);  

jQuery("li.twittrig").hover(
    function(){
       jQuery("li.twitter").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.twitter").animate({'left': '0px'},400);
    }
);  

jQuery("li.sctrig").hover(
    function(){
       jQuery("li.soundcloud").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.soundcloud").animate({'left': '0px'},400);
    }
);  

jQuery("li.wptrig").hover(
    function(){
       jQuery("li.blog").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.blog").animate({'left': '0px'},400);
    }
);  

jQuery("li.etrig").hover(
    function(){
       jQuery("li.email").animate({'left': '130px'},400);
    },
    function(){
        jQuery("li.email").animate({'left': '0px'},400);
    }
);                              
});

Solution

You could try something like this:

http://jsfiddle.net/XPLde/1/

HTML:

<ul>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
        </li>
    <li>
        <img src="http://placehold.it/50x50" alt="">
        <a href="#">test</a>
    </li>

</ul>

CSS

ul {width:130px; margin:0; padding:0;}
li {position: relative; height:50px; margin-bottom:5px; background:red;     list-style:none;}
li img {  position:absolute;} 
li a {display:block; width:200px; height:100%; color:#fff; position:relative; background:blue; top:0; left:-230px;}

jQuery

$(document).ready(function() {

        $("li").hover(
            function(){
               $("a", this).stop().animate({'left': '130px'},400);
            },
            function(){
               $("a", this).stop().animate({'left': '-230px'},400);
            }
        );  
});