放大鼠标悬停的效果

Question

我有一个包含几个链接的导航栏。我想链接放大(增加大小)鼠标悬停。我希望其他链接在各自的位置。我为此编写了如下代码:

<ul>
<li> <a href="#">Link 1 </a> </li>
<li> <a href="#">Link 2 </a> </li>
<li> <a href="#">Link 3 </a> </li>
</ul>

css代码:

a {
text-decoration:none;
font-size: 15px;
}
ul {
list-style-type:none;
} 
li {
display: inline;
padding-left: 50px;
}

，这里是jquery的悬停效果

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

这里是上面Demo的jsfiddle链接

我没有得到想要的效果。我错过了什么?以及如何在这个缩放过程中使用animate() ?

Answer 1

你可以很容易地制作动画:

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

例如:

http://jsfiddle.net/m9tHb/1/

你现在还有什么不喜欢的?

阻止其他链接移动:

我不是CSS专家，但是通过设置li元素的宽度并让它们向左浮动(从左边堆叠)，它们将不会移动:

li {
    padding-left: 50px;
    width:100px;
    float:left;
}

http://jsfiddle.net/m9tHb/3/

虽然我确信有很多方法可以做到……你只需要确保改变元素的大小不会影响到其他任何东西。例如，你可以使用绝对定位。

注:只是注意到将li中的文本对齐为居中会让它看起来更好;)

text-align:center;

jsfiddle:

http://jsfiddle.net/m9tHb/4/

编辑:和绝对定位示例:

http://jsfiddle.net/m9tHb/5/