Question

我有一个包含很少链接的导航栏。我希望链接在鼠标悬停时放大（增加大小）。我希望其他链接处于各自的位置。我为此编写了代码。

这里是html

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

e.g：

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

你还不喜欢你现在拥有的东西吗？

停止其他链接移动：

我不是CSS专家，但是通过设置li元素的宽度并使它们向左浮动（从左侧向上堆叠）它们将不会移动：

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

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

虽然我确信有很多方法可以做到这一点......你只是想确保改变元素的大小不会影响其他任何东西。你可以使用绝对定位。

P.S。只是注意到将li中的文本对齐为中心会使它看起来更好;）

text-align:center;

的jsfiddle：

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

编辑：绝对定位的例子：

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

放大鼠标悬停的效果

1 个答案: