Jquery 将鼠标悬停在div上以显示链接，但可以'；不要点击链接

我创建了两个列表，一个是按钮列表，另一个是隐藏在页面之外的链接列表。当我将鼠标悬停在按钮上时，其中一个列表项将设置动画，以便从页面左侧飞入。这一切都很好，我的问题是，点击链接，我必须移动我的鼠标远离再次收回链接的按钮。 有谁能提出一个更聪明的方法来实现我的目标吗。参考此JS小提琴：

jQuery代码如下：

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);
    }
);                              
});

---

您可以尝试以下方法：

HTML:

jQuery

$(document).ready(function() {

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

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;}

$(document).ready(function() {

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

$(function() {
    $(".triggers li").mouseenter(function() {
        $('.buttons li').each(function() {
            $(this).animate({'left': '0'}, 400);
        });

        var hoverEl;
        var $this = $(this);

        if($this.hasClass('fbtrig')) hoverEl = $(".facebook");
        if($this.hasClass('twittrig')) hoverEl = $(".twitter");
        if($this.hasClass('sctrig')) hoverEl = $(".soundcloud");
        if($this.hasClass('wptrig')) hoverEl = $(".blog");
        if($this.hasClass('etrig')) hoverEl = $(".email");

        hoverEl.animate({'left': '130px'}, 400);
    });
});