Question

我有一个水平导航栏的想法，你所在的页面会有一个下划线或底部边框，当你去一个＆lt; li>在下划线/下边界的菜单中，以大约中等速度移动到＆lt; li>你的鼠标悬停在上面。任何帮助都非常赞赏。

很抱歉没有提供示例代码。我根本不知道从哪里开始

这是菜单，仅举几个例子：

<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
li.active
{
border-bottom: 2px solid red;
}
a
{
text-decoration:none;
}
</style>
</head>

<body>
<ul>
<li class="active"><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Answer 1

这就是我认为你所追求的。将鼠标悬停在水平导航栏中的项目时，它应设置标记的动画以在该项目下移动。您可以通过将标记赋予固定位置并将其顶部和左侧属性设置为位置来实现此目的。

http://jsfiddle.net/dBxn8/

$('li').mouseover( function() { 
    $('.active').removeClass('active');
    $(this).addClass('active');
    var top = $(this).offset().top + $(this).height() + 5;
    var left = $(this).offset().left + ($(this).width() / 2);
    $('#marker').stop().animate( { top: top, left: left  }, 2000 );
});

jQuery滑动边框底部为水平导航栏/菜单

1 个答案: