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

我正在尝试创建一个链接，当您将鼠标悬停在文本上时，它会变成两个链接。您可以看到类似于我想在这里做的事情：当您将鼠标悬停在链接上时，您可以看到

collections

链接变为两个单独的男性和女性链接。目前，我已经成功地创建了一个链接，当鼠标悬停在上面时，它会分成两个单词，而不是两个链接

以下是我的HTML代码：

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

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

---

有什么想法吗？

如果我没弄错，你可以试试这样的：

li{
列表样式：无；
}
李阿{
显示：无；
左边缘：.3em；
}
李：悬停跨度{
显示：无；
}
李：停一停{
显示：内联块；
}

收集

好的，下面是如何实现这一目标的小分解。
在事物的顶部有一个块元素

然后有两个隐藏元素，它们是块元素的子元素

当您将鼠标悬停在块元素上时，将显示其他元素

还可以隐藏包含悬停文本的子元素

.block:悬停.隐藏{
显示：内联；
}
.街区{
颜色：黑色；
字体大小：20px；
}
.隐藏{
显示：无；
}

悬停

。已拆分{
显示：无；
}
.链接：悬停。一个链接{
显示：无；
}
.links:悬停。拆分{
显示：内联；
}

请试试这个

#导航项目1{
位置：相对位置；
}
#nav-ITEM 1：之前，
#导航项目1：之后{
显示：无；
位置：绝对位置；
最高：100%；
颜色：#000；
}
#导航项目1：悬停：之前，
#导航项目1：悬停：之后{
显示：块；
}
#导航项目1：之前{
内容：“男人”；
右：50%；
}
#导航项目1：之后{
内容：“妇女”；
左：50%；
颜色：绿色；
}

在本例中，当您将鼠标悬停在“悬停”文本上时，我也想隐藏该文本，这可能吗？太好了，谢谢，我将导航项目更改为具有一个公共类

导航项目

，然后将代码中的

a

更改为

.nav项目

。我做了一件好事，谢谢你。

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

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