鼠标悬停时的刺激放大效果答案

【问题标题】：Irritating magnify effect on mouse hover鼠标悬停时的刺激放大效果
【发布时间】：2013-06-11 19:14:30
【问题描述】：

这是我的JsFiddle

我有三个用ul li 标签括起来的链接。我希望我的每个链接在有人鼠标悬停时放大。我知道可以使用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;
}

【问题讨论】：

标签： jquery css jquery-animate magnify

【解决方案1】：

问题在于你的空白

你必须修改你的 CSS 来调整空格

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

我已经更新了你的小提琴，看看这里http://jsfiddle.net/m9tHb/13/

希望对你有帮助

【讨论】：