我前一阵子做了这个,也许这是你需要的。它将计算您悬停的锚元素的宽度,并将下划线元素(一个 div)增长到它的宽度和位置
//underliner
$('#menu a').hover(function(){
var position = $(this).position(); var width = $(this).width();
$('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
$('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
$('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});
下划线元素的 CSS(根据您的需要更改高度和背景颜色)
#underliner {
display: none;
position: relative;
height: 5px;
line-height: 5px;
font-size: 1px;
background-color: #44c8f5;
width: 1px;
opacity: 0;
filter: alpha(opacity=0);
}
HTML
<div id="menu">
<ul>
list items with <a href>'s
</ul>
<div id="underliner"></div>
</div>
编辑:我尝试将它与您的代码合并,但由于您没有包含 html,我不得不猜测您的“导航栏”是如何布局的。无论如何,试试这个小提琴:http: //jsfiddle.net/c_kick/DuWcz/