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

如果我理解你，你可以尝试这样的事情：

＆＃13;

li {
  list-style: none;
}

li a {
  display: none;
  margin-left: .3em;
}

li:hover span {
  display: none;
}

li:hover a {
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

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

＆＃13;

.block:hover .hide {
  display: inline;
}

.block {
  color: black;
  font-size: 20px;
}

.hide {
  display: none;
}

＆＃13;

<div class="block">
  <span class="default text">Hover</span>
  <a class="hide" href="#">Snowball</a>
  <a class="hide" href="#">Kitten</a>
<div>

＆＃13;

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

请试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: