我有一个包含几个链接的导航栏。我希望在鼠标悬停时放大(增加大小)的链接。我希望其他链接处于各自的位置。我为此编写了以下代码。
这是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'});
});
});
这是上面演示的jsfiddle链接
我没有得到预期的效果。我错过了什么?以及如何在这个缩放过程中使用 animate() ?