Javascript 鼠标悬停上的jquery幻灯片+；选择时保持活动状态

我工作的导航，我想添加一些动画时，鼠标在一个链接下面的形状箭头将滑动到该链接，并保持活跃时，页面被激活

这里有一个例子

导航码

<nav>
<ul>
<li><span id="arrow"></span><a class="home" href=""><i class="material-icons nav-icon-home">home</i></a></li>
<li><a id="a-b" href=""><i class="material-icons nav-icon">build</i>SERVICES</a></li>
<li><a id="a-c" href=""><i class="material-icons nav-icon">people</i>ABOUT US</a></li>
<li><a id="a-d" href=""><i class="material-icons nav-icon">email</i>CONTACT US</a></li>
<li><a id="a-e" href=""><i class="material-icons nav-icon">work</i>CAREERS</a></li>
</ul>

我只需要jquery部分的帮助。有什么想法可以让它工作吗？

检查一下

$（'nav ul li'）。悬停（函数（）{
$（'#arrow'）.offset（{left:$（this.offset（）.left}）；
}，函数（）{
$（'#arrow'）.offset（{left:$（'nav ul li'）.eq（0.offset（）.left}）；
});
$（'nav ul li'）。悬停（函数（）{
$（'#箭头'）.stop（）.animate（{
左：$（this）.offset（）.left+'px'
}，300，函数（）{
//动画完成。
}); 
}，函数（）{
$（'#箭头'）.stop（）.animate（{
左：$（'nav ul li'）.eq（0）.offset（）.left+'px'
}，300，函数（）{
//动画完成。
});
});可能与您想要的内容重复请解释您的答案。。
#arrow {
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFFFFF;
top: 55px;
z-index: 100;
}