如何从活动导航链接中删除悬停时不必要的附加下划线？

Posted 2023-03-06

【中文标题】如何从活动导航链接中删除悬停时不必要的附加下划线？

【英文标题】：How to remove unnecessary additional underline on hover from active navigation links?

【发布时间】：2017-09-18 22:01:00

【问题描述】：

我有一些 CSS 定义了悬停时的动画下划线样式，用于我的导航链接。目前，这适用于悬停时的非活动链接，这是完美的。活动链接也保留此下划线。问题是这段代码也适用于已经有这个下划线的活动链接。

这会在现有下划线的基础上创建一个额外的下划线，使其外观厚一倍。是否可以在我的导航 CSS 中进行调整以解决此问题？一旦链接处于活动状态，我希望下划线保持静态和不变。

body .active-link>a, .text .active-link>a:visited 
   border-bottom: 1px solid #000;
   margin: 0 11px;
   padding: 0 !important;
   

.horizontal-navigation-bar nav ul li a:after 
   content: '';
   display: block;
   height: 1px;
   width: 0;
   background: transparent;
   transition: width .5s ease, background-color .5s ease;
   

.horizontal-navigation-bar nav ul li a:hover:after 
   background: #000;
   width: 100%;
   

作为参考，我的网站是：www.tylercharboneauprofessional.com

【参考方案1】：

<li> 上有一个活动链接的选择器

所以用它来否定下划线

.active-link a:after background: transparent;

【参考方案2】：

如果<a> 是活动链接的后代，则告诉选择器不要使用背景。

.horizontal-navigation-bar nav ul li.active-link a:after 
    background: none !important;

【参考方案3】：

您必须将活动链接定位为不在 :after 伪元素上显示背景。在代码末尾添加此内容。希望对您有所帮助。

.horizontal-navigation-bar nav ul li.active a:hover:after 
    background: none;

【讨论】：

感谢您的意见。不幸的是，这并没有达到预期的效果，因为它通过将鼠标悬停在非活动链接上来取消动画下划线。我接受了上面 Roko 的回答。

你是用这个替换你的代码还是在之后添加代码。因为这意味着只针对活动链接。您应该在悬停代码之后添加此代码。

哎呀，好像我误会了你！对于那个很抱歉。事实上，我确实替换了代码，而不是将其添加到我现有的代码中。但是，由于我目前没有看到 Roko 的建议有任何功能缺陷，我想我会坚持下去。非常感谢:)

【参考方案4】：

最简单的解决方法是...

.horizontal-navigation-bar nav ul li a:after 
  margin-bottom: -1px;                             /* ... add this line */

（让它们重叠，根本不在乎。）

【讨论】：

嘿@Roko C. Buljan - 感谢您的意见！确实，这似乎是解决我的问题的最快方法，并且效果很好。另一个讨厌的问题解决了:)

【参考方案5】：

尝试使用not 选择器。这将针对不具有active-link类的anchor标签。

 .horizontal-navigation-bar nav ul li a:not(.active-link):hover:after 
       background: #000;
       width: 100%;
   

【讨论】：

感谢您的回答。不幸的是，这也删除了悬停时非活动链接的下划线状态