Javascript 导航链接：悬停和活动的CSS动画

我正在尝试用一些CSS设计一个

导航条

，以向导航链接添加一些动画。所以我试图在悬停时完成，文本将从右向左加下划线，当导航链接处于活动状态时，我希望它加下划线

使用我的解决方案，我几乎获得了我想要的行为，除了当导航链接处于活动状态时，悬停动画和活动下划线不会相互重叠。两个下划线在文本下方形成两个单独的下划线

代码如下：

{navItems.map((item) => (
    <div className="example">
        <NavLink
            key={item.title.toLowerCase()}
            className="hover hover-1"
            activeClassName="active"
            to={item.link}
            exact={item.exact}
        >
            {item.title}
        </NavLink>
    </div>
))}

---

我非常感谢您在这个问题上的帮助：）

您可以通过在css中应用而不是来实现您的要求，如下所示

.example {
 // remaining properties 

 // EVERYTHING IS SAME BUT JUST ADDED not
.hover:not(.active) {

text-align: center;
margin: 0 auto;
padding: 0;
transition: $animate;
position: relative;
&:before,
&:after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0px;
  height: 4px;
  margin: 5px 0 0;
  transition: $animate;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: $darkBlue;
}

&.hover-1 {
  &:before,
  &:after {
    left: 0;
  }
 }
}
 // remaining properties
}

---

您可以通过在css中应用而不是来实现您的需求，如下所示

.example {
 // remaining properties 

 // EVERYTHING IS SAME BUT JUST ADDED not
.hover:not(.active) {

text-align: center;
margin: 0 auto;
padding: 0;
transition: $animate;
position: relative;
&:before,
&:after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0px;
  height: 4px;
  margin: 5px 0 0;
  transition: $animate;
  transition-duration: 0.5s;
  opacity: 0;
  background-color: $darkBlue;
}

&.hover-1 {
  &:before,
  &:after {
    left: 0;
  }
 }
}
 // remaining properties
}

---

谢谢，它现在工作得更好了，但我有一种奇怪的行为，这取决于刷新页面时哪个导航链接处于活动状态，它工作还是不工作。因此，当前状态是，当刷新其工作的页面时，其中一个非起始页面的导航链接处于活动状态，但当我单击“开始”-导航链接时，功能中断并返回到我实现之前的状态（.hover:not（.active）），我想路径和导航链接属性有问题，准确。你能提供一些stackblitz之类的东西吗？？但对我来说，当我刷新页面时，它工作得很好。当我使用Stackblitz的核心功能时，它也工作得很好。所以我试图复制这个问题。正如我之前所写的，我认为JS代码存在一些问题，而不是CSS。我会不断更新并感谢您的帮助问题是有一个页面的css代码与导航栏中的css冲突。谢谢，它现在工作得更好了，但我发现这种奇怪的行为，取决于刷新页面时哪个导航链接处于活动状态，它工作或不工作。因此，当前状态是，当刷新其工作的页面时，其中一个非起始页面的导航链接处于活动状态，但当我单击“开始”-导航链接时，功能中断并返回到我实现之前的状态（.hover:not（.active）），我想路径和导航链接属性有问题，准确。你能提供一些stackblitz之类的东西吗？？但对我来说，当我刷新页面时，它工作得很好。当我使用Stackblitz的核心功能时，它也工作得很好。所以我试图复制这个问题。正如我之前所写的，我认为JS代码存在一些问题，而不是CSS。我会不断更新并感谢您的帮助问题是有一个页面的css代码与导航栏中的css冲突。