наведите указатель мыши на div, чтобы показать ссылку, но не можете нажать ссылку

Question

Я создал 2 списка, один список кнопок, другой список ссылок, скрытых со страницы. Когда я нажимаю кнопку, один из элементов списка анимирует, чтобы лететь с левой стороны страницы. Все это прекрасно работает, проблема заключается в том, что для того, чтобы щелкнуть по ссылке, мне нужно отвести мышь от кнопки, которая снова убирает ссылку. Может ли кто-нибудь предложить более умный способ добиться того, что мне нужно. Посмотрите этот JS скрипку для справки:

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

Answer 2

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

jsFiddle code