javascript - 悬停同一列表中的其他链接时移动水平背景线

Question

你介意看看my jsfiddle吗？ ？

如您所见，我在事件列表项 anchor 下方放置了一条水平线。
我希望水平线位于 anchor 的底部**，就像悬停时的边框底部一样，而不是光标所在的位置。谁能帮帮我？

先谢谢你!
谨致问候，
乔纳森

Answer 1

问题是因为您正在为停止 ul 的鼠标悬停并反转动画的行使用 li 元素。而是在包含元素内使用 div，并使用较低的 z-index 来阻止它拦截鼠标悬停事件。

HTML:

<div id="container">
    <ul>
        <li><a href="#">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
        <li><a href="# "class="active">sub nav</a></li>
        <li><a href="#">sub nav</a></li>
    </ul>
</div>

修改后的 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
});

Example fiddle

此外，您需要使 ul li a 元素上的 border-bottom 透明，以便线条穿过它们显示。如果您愿意，可以使用 margin-bottom: 1px。