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

Question

你介意看看我的 jsfiddle吗？

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

提前谢谢你！
亲切的问候，
乔纳森

Answer 1

问题是因为您使用了一个li元素来停止鼠标悬停ul并反转动画。而是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
});

示例小提琴

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

Answer 2

不确定您要实现的确切目标，但如果它只是在活动<li>元素下有一条线，那么这个 jsfiddle可能会完成这项工作。

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

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

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

Answer 3

问题是动画li的 z-index 比其他列表元素高。您需要从链接中删除白色边框。

看看这个小提琴：http: //jsfiddle.net/YFUsJ/12/

CSS：

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;
}