放大鼠标悬停效果

我有一个导航栏，其中包含几个链接。我想链接放大（增加大小）鼠标悬停。我希望其他链接处于各自的位置。我为此写了代码以下代码。放大鼠标悬停效果

这里是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链接，上面Demo

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

来源

2013-05-12 shubendrak

您可以动画很容易：

$(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/

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

P.S.只注意到对齐的李文本为中心，使它看起来更好）

text-align:center;

的jsfiddle：

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

编辑：和实施例的绝对定位：

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

来源

2013-05-12 07:44:12 gordatron

在mousehover我不希望其他链接改变其位置。目前当我把鼠标放在链接1上时，链接2和链接3的位置都受到了影响 – shubendrak 2013-05-12 07:47:46

我用一些选项更新了答案 – gordatron 2013-05-12 07:59:03

text-align：center看起来好多了。感谢您的好建议。你能告诉我如何使用绝对定位来做到这一点。 – shubendrak 2013-05-12 08:24:19

放大鼠标悬停效果

回答

相关问题