Javascript 在同一列表中悬停其他链接时移动水平背景线

你介意看一看吗

如您所见，我在活动列表项锚点下方放置了一条水平线。
我希望水平线位于锚点的底部**，就像悬停时的边框底部，而不是光标所在的位置。有人能帮我吗

提前谢谢你
致以亲切的问候，

---

Jonathan不确定您想要实现什么，但是如果它只是在活动的

元素下获得一行，那么它可能会完成任务

它使用css应用下划线，并使用一些简化的jQuery：

$(document).ready(function() {
    $('ul').mouseout(function(){
        $(this).removeClass('active');
    }).

    $('ul > li').mouseenter(function(){
        $(this).addClass('active');
    });
});

---

问题是因为您使用了一个

li

元素来表示该行正在停止

ul

上的鼠标并反转动画。相反，在包含元素内使用

div

，使用较低的z索引来阻止它拦截鼠标悬停事件

HTML:

修订的javascript：

var animation = $('<div>').css({
    'position': 'absolute',
    'height': active.outerHeight()-1,
    'width': active.outerWidth(),
    'marginTop': (active.parent().index() * active.outerHeight()),
    'borderBottom': '1px solid #000',
    'z-index': -10
});

var animation=$（''）.css({
'位置'：'绝对'，
“高度”：活动的.outerHeight（）-1，
“宽度”：活动的.outerWidth（），
“marginTop”：（active.parent（）.index（）*active.outerHeight（）），
“borderBottom”：“1px实心#000”，
‘z指数’：-10
});

---

此外，您需要使

ul li a

元素上的

边框底部

透明，以便行通过它们显示。如果愿意，您可以使用

margin-bottom:1px

。

问题是动画

li

的z索引比其他列表元素高。你需要从链接中删除白色边框

看看这把小提琴：

CSS:

---

你是我的人，罗里！感谢您在这一点上帮助我，这正是我想要归档的内容。不需要使用

div

元素，它也应该可以使用z索引较低的

li

元素。没错，但是在文档流中使用

li

元素不是很有语义。好的，在这里我不得不同意你。谢谢你的回复！下次我会尽力更好地解释我的问题。我想的更多的是图片，而不是文字。。Rory回答了我的问题，请参见上面我选择的答案。不用担心！很高兴有人能帮忙。Thnx Alex！这就是我想要的。但正如Rory所说，他用div元素代替列表项的方法更具语义。是的，我同意你们的观点。

var animation = $('<div>').css({
    'position': 'absolute',
    'height': active.outerHeight()-1,
    'width': active.outerWidth(),
    'marginTop': (active.parent().index() * active.outerHeight()),
    'borderBottom': '1px solid #000',
    'z-index': -10
});

ul li {
    display: block;
    position:relative;
    z-index:1;
}
ul li a {
    text-decoration: none;
    height: 30px;
    line-height: 30px;
    display: block;
    padding:5px;
    color: #555;
    font-size: 1.4em;
}