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

Posted 2023-05-08

【中文标题】将其他链接悬停在同一列表中时移动水平背景线

【英文标题】：moving horizontal background line when hovering other links in the same list

【发布时间】：2012-05-12 19:28:41

【问题描述】：

你介意看看my jsfiddle吗？

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

谢谢你！ 诚挚的问候， 乔纳森

【参考方案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

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

【讨论】：

你是我的男人罗里！感谢您帮助我解决这个问题，这正是我想要归档的内容。

不需要使用div 元素，它也应该使用具有较低z-index 的li 元素。

是的，但是在文档流之外有一个 li 元素在 IMO 中不是很语义化。

好吧，我不得不同意你的看法。

【参考方案2】：

不确定您想要实现的具体目标，但如果它只是在活动的<li> 元素下添加一行，那么this jsfiddle 可能会完成这项工作。

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

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

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

【讨论】：

感谢您的回复 LordSauce！下次我会尝试更好地解释我的问题。我想更多的是图片而不是文字。罗里回答了我的问题，请参阅上面我选择的答案。

别担心！很高兴有人能够提供帮助。

【参考方案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;

【讨论】：

谢谢亚历克斯！这就是我想要的。但正如 Rory 所说，他放置 div 元素而不是列表项的方式更符合语义。

是的，我必须同意你们。