悬停时将一个 link 变为两个

Question

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

这是我的 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";
}

所以文本发生了很大的变化，但我还没有完全弄清楚如何将文本变成两个单独的 link。我不确定我是否必须为此使用 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>

Answer 2

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

然后有两个隐藏元素是块元素的子元素。

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

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

.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>

Answer 3

.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>

Answer 4

请试试这个

#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>

悬停时将一个 link 变为两个

Change one link into two on hover

html

javascript

css

jquery

hover