这是我的 JsFiddle
我有三个链接包含在 ul
li
标签中。我希望我的每个链接在鼠标悬停时放大。我知道可以使用 absolute
定位和 z-index
来完成。我尝试了一些东西,但我没有做对。我的 jsFiddle 的问题是放大后的第二个 li
元素需要两行。
谁能帮帮我。
这是我的 HTML
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About us</a> </li>
<li> <a href="#">Contact us</a> </li>
</ul>
这是我的 Jquery
$(function(){
var t = 10;
$('li').each(function(e,i){
$(this).offset({top:50,left:t});
t+=100;
});
$('a').hover(function(){
$(this).animate({'z-index':'1','font-size':'30px'},50);
},
function(){
$(this).animate({'z-index':'0','font-size':'15px'},50);
});
});
这是 CSS:
a {
text-decoration:none;
font-size: 15px;
}
ul {
list-style-type:none;
}
li {
padding-left: 50px;
width:100px;
text-align:center;
position:absolute;
}
最佳答案
问题出在你的空白处
你必须修改你的css来调整空白
li {
padding-left: 50px;
width:100px;
text-align:center;
position:absolute;
white-space:nowrap;
}
我已经更新了你的 fiddle ,看看这里 http://jsfiddle.net/m9tHb/13/
希望对你有帮助
关于jquery - 鼠标悬停时的恼人放大效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17120326/