放大鼠標懸停效果

我有一個導航欄，其中包含幾個鏈接。我想鏈接放大（增加大小）鼠標懸停。我希望其他鏈接處於各自的位置。我爲此寫了代碼以下代碼。放大鼠標懸停效果

這裏是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

放大鼠標懸停效果

回答

相關問題