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

Change one link into two on hover

本文关键字：两个 链接 悬停 一个      更新时间：2023-09-26

我正试图创建一个链接，当您将鼠标悬停在文本上时，该链接将变为两个链接。你可以在这里看到我想做的事情：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知识很糟糕。

有什么想法吗？

如果我理解得对，你可以试试这样的东西：

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>

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

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

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

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

.block:hover .hide {
  display: inline;
}
.block {
  color: black;
  font-size: 20px;
}
.hide {
  display: none;
}
<div class="block">
  <span class="default text">Hover</span>
  <a class="hide" href="#">Snowball</a>
  <a class="hide" href="#">Kitten</a>
<div>

.splitted {
	display: none;
}
.links:hover .one-link {
	display: none;
}
.links:hover .splitted {
	display: inline;
}
<span class="links">
  <a href="#" class="one-link">Collection</a>
  <a href="#" class="splitted">Men</a>
  <a href="#" class="splitted">Women</a>
</span>

请尝试此

#nav-item1{
  position: relative;
}
#nav-item1:before,
#nav-item1:after{
  display: none;
  position: absolute;
  top: 100%;
  color: #000;
}
#nav-item1:hover:before,
#nav-item1:hover:after{
  display: block;
}
#nav-item1:before{
  content: 'Men';
  right: 50%;
}
#nav-item1:after{
  content: 'Women';
  left: 50%;
  color: green;
}
<ul>
  <li><a href="#" id="nav-item1"><span>Collection</span></a>
  </li>
</ul>

相关文章：