자극 여기

Question

가 마우스 호버에 효과를 확대 내 JsFiddle

나는 세 개의 링크가 누군가 마우스를 가져 가면 확대 내 각 링크를 원하는 ulli tag.I에 동봉 있습니다. 나는 absolute 포지셔닝 및 z-index을 사용하여이 작업을 수행 할 수 있음을 알고 있습니다. 나는 무언가를 시도했지만 올바르게하지 못하고있다. 내 jsFiddle의 문제는 두 번째 줄을 취한 후 두 번째 li 요소이다.

누군가 나를 도와 줄 수 있습니까? 여기

내 HTML 여기

<ul> 
<li> <a href="#">Home</a> </li> 
<li> <a href="#">About us</a> </li> 
<li> <a href="#">Contact us</a> </li> 
</ul> 

입니다 내 jQuery를

다음

$(function(){ 
var t = 10; 
$('li').each(function(e,i){ 
    $(this).offset({top:50,left:t}); 
    t+=100; 
}); 

$('a').hover(function(){ 
    $(this).animate({'z-index':'1','font-size':'30px'},50); 
     }, 
     function(){ 
      $(this).animate({'z-index':'0','font-size':'15px'},50); 
    }); 
}); 

는 CSS :

a { 
text-decoration:none; 
font-size: 15px; 
} 
ul { 
list-style-type:none; 
} 
li { 
padding-left: 50px; 
width:100px; 
text-align:center; 
position:absolute; 
} 

Answer 1

문제는 공백 함께 당신이

당신의 CSS는 내가 당신의 바이올린을 업데이트 한

li { 
    padding-left: 50px; 
    width:100px; 
    text-align:center; 
    position:absolute; 
    white-space:nowrap; 
} 

이

을하는 데 도움이 여기에 보면 http://jsfiddle.net/m9tHb/13/

희망을 가지고있는 공백을 조정합니다