jquery - 将鼠标悬停在 div 上以显示链接，但无法点击链接

Question

我创建了 2 个列表，一个是按钮列表，另一个是隐藏在页面之外的链接列表。当我将鼠标悬停在一个按钮上时，其中一个列表项会动画化以从页面左侧飞入。这一切都很好，我遇到的问题是，要单击链接，我必须将鼠标从再次收回链接的按钮上移开。谁能建议一种更聪明的方法来实现我所追求的目标。请参阅此 JS fiddle 以供引用:

http://jsfiddle.net/YyEJf/

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

Answer 1

你可以尝试这样的事情:

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