:hover 使用 React Router 时状态为“stick”

Question

CODESANDBOX 链接：https://codesandbox.io/s/cranky-paper-qucsp

如果需要，我很乐意发布更多代码。

我正在学习 React，我有一个简单的页面设置，其中路由设置为其他组件。这些标签有一个 className 集并具有悬停/焦点状态。当我单击其中一个标签以加载另一个组件（页面刷新）时，这些标签的悬停/焦点状态将保持不变，直到我“单击”其他地方为止。我什至可以在其他标签上激活悬停状态，而原来的标签仍然像悬停在上面一样。有人可以告诉我为什么会发生这种情况/如何解决它/链接我解释它的文档吗？

再次，如果相关，我很乐意提供任何其他代码。谢谢大家。

下面是一个简单的 Nav.js 和 App.js 来展示我正在使用的内容。导航具有标签和标签（用于外部网站），并且悬停状态“粘”在两个标签上。

function App() {
  return (
    <Router>
      <div className="main-container">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/About" component={About} />
          <Route path="/Projects" component={Projects} />
        </Switch>
      </div>
    </Router>
  );
}

function Nav() {
    return (
          <nav>
            <Link to="/About" className="nav-link"><li>About</li></Link>
            <a href="randomlink.com" className="nav-link"target="_blank">link1</a>
            <Link to="/" className="homeLink"><li>Home</li></Link>
            <a href="randomlink.com" className="nav-link" target="_blank">link3</a>
            <Link to="/Projects" className="nav-link"><li>Projects</li></Link>
          </nav>
    );
}

Answer 1

似乎额外的下划线是由您的 .homeLink::after 选择器和 CSS 引起的。当您将鼠标悬停在主页链接上时，您会看到这一点，并且悬停/焦点下划线会动画化。

.homeLink::after {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: -3px;
  left: 0;
  background-color: black;
  transform: scaleX(1);
}

当我删除此选择器时，多余的下划线将被删除，并且悬停/焦点行为似乎与您的预期一样。

我认为，如果您切换到使用 Navlink 链接组件，您可以在其中指定样式以在链接处于活动状态时应用于链接，我认为您的某些 CSS 可以得到简化。

Answer 2

这是因为当链接处于焦点时您正在应用 scaleX(1)。这导致下划线粘住。

从以下位置更改您的 css：

.homeLink:hover::before,
.homeLink:focus::before {
  transform: scaleX(1);
}
.nav-link:hover::after,
.nav-link:focus::after {
  transform: scaleX(1);
}

收件人：

.homeLink:hover::before{
  transform: scaleX(1);
}
.nav-link:hover::after{
  transform: scaleX(1);
}

希望这会有所帮助。