javascript - 悬停时将一个链接更改为两个

Question

我正在尝试创建一个链接，当您将鼠标悬停在文本上时该链接会变为两个链接。你可以在这里看到我想做的事情:https://www.kenzo.com/en/当您将鼠标悬停在链接上时，您会看到 collections 链接变为两个单独的男女链接。目前，我已经设法创建了一个链接，当鼠标悬停在上面时，该链接会分成两个词，但不会分成两个链接。

这是我的 HTML 代码:

<li><a href="#" id="nav-item1"><span>Collection</span></a></li>

这是我的 CSS 代码:

#nav-item1:hover span {
    display:none;
}

#nav-item1:hover:before {
    content: "Men Women";
}

所以文本发生了很大的变化，但我还没有完全弄清楚如何将文本变成两个单独的链接。我不确定我是否必须为此使用 JS，因为我的 JS 知识很糟糕。

有什么想法吗？

Answer 1

如果我没理解错的话，你可以试试这样:

li {
  list-style: none;
}

li a {
  display: none;
  margin-left: .3em;
}

li:hover span {
  display: none;
}

li:hover a {
  display: inline-block;
}

<li>
  <span>Collection</span>
  <a href="#" id="nav-item1">Man</a>
  <a href="#" id="nav-item2">Women</a>
</li>