将鼠标悬停在文本上以显示 ul 元素

Question

我正在尝试实现此处列出的类似效果 - https://www.harrythehirer.com.au/

这是我到目前为止所拥有的，但正如你所看到的，它并不完整。

即使我已经将li孩子的不透明度设置为0，当您将鼠标悬停在空白区域时，它会激活悬停。

div.section-44 {
text-align: center;
}
div.section-44 span {
display: inline-block;
vertical-align: middle;
}
div.section-44 ul {
padding-left: 0px;
}
div.section-44 ul li {
list-style-type: none;
background: red;
padding: 20px 40px;
color: #fff;
border-radius: 50px;
}
div.section-44 ul li:nth-child(1), div.section-44 ul li:nth-child(2), div.section-44 ul li:nth-child(4), div.section-44 ul li:nth-child(5) {
opacity: 0;
}
div.section-44 ul:hover li {
opacity: 1;
}

<div class="section-44">
<h2>
<span>I want </span>
<span>
<ul>
<li><a href="#">to do A</a></li>
<li><a href="#">to do B</a></li>
<li><a href="#">to do C</a></li>
<li><a href="#">to do D</a></li>
<li><a href="#">s</a></li>
</ul>
</span>
</h2>
</div>

这是jsfiddle -> https://jsfiddle.net/shutup/vrw0zp7L/16/

任何帮助都非常感谢。

谢谢。

Answer 1

您可以使用绝对位置和一些转换来执行此操作。关键是拥有一个单独的列表，并在将鼠标悬停在所需文本上时显示/隐藏它。

它应该看起来像下面的代码：

div.section-44 {
text-align: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
div.section-44 .items {
display: inline-block;
position: relative;
}
div.section-44 .items span {
padding: 20px 40px;
color: #fff;
background: black;
border-radius: 50px;
}
div.section-44 .items:hover ul {
opacity: 1;
transform: translateY(-50%) scale(1);
}
div.section-44 ul {
padding-left: 0px;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 100%;
opacity: 0;
transition: 0.3s ease-out;
background: green;
border-radius: 50px;
padding: 20px;
}
div.section-44 ul li {
list-style-type: none;
background: red;
border-radius: 50px;
color: #fff;
padding: 20px 40px;
}
div.section-44 ul:hover ul {
opacity: 1;
visibility: visible;
}

<div class="section-44">
<h2>
<span>I want </span>
<div class="items">
<span>to do A</span>
<ul>
<li><a href="#">to do A</a></li>
<li><a href="#">to do B</a></li>
<li><a href="#">to do C</a></li>
<li><a href="#">to do D</a></li>
<li><a href="#">s</a></li>
</ul>
</div>
</h2>
</div>

源 Scss in fiddle

Answer 2

您将不透明度设置为 0 和 1。而是将显示设置为无并阻止，它将起作用。原因不透明度仅控制透明度，但它将存在并占用显示设置为无时情况不同的空间。

查看下面的帖子以获取详细说明

不透明度：0 是否与可见性：隐藏具有完全相同的效果

div.section-44 {
text-align: center;
}
div.section-44 span {
display: inline-block;
vertical-align: middle;
}
div.section-44 ul {
padding-left: 0px;
}
div.section-44 ul li {
list-style-type: none;
background: red;
padding: 20px 40px;
color: #fff;
border-radius: 50px;
}
div.section-44 ul li:nth-child(1),
div.section-44 ul li:nth-child(2),
div.section-44 ul li:nth-child(4),
div.section-44 ul li:nth-child(5) {
display: none;
}
div.section-44 ul:hover li {
display: block;
}

<div class="section-44">
<h2>
<span>I want </span>
<span>
<ul>
<li><a href="#">to do A</a></li>
<li><a href="#">to do B</a></li>
<li><a href="#">to do C</a></li>
<li><a href="#">to do D</a></li>
<li><a href="#">s</a></li>
</ul>
</span>
</h2>
</div>

Answer 3

div.section-44 {
text-align:center;
& span {
display:inline-block;
vertical-align:middle;
}
& ul {
padding-left:0px;

& li {
list-style-type:none;
background:red;
padding:20px 40px;
color:#fff;
border-radius:50px;
&:nth-child(1), &:nth-child(2),&:nth-child(4), &:nth-child(5) {
opacity:0;
}
}
&:hover {
background : red;
border-radius: 25px;
& li {
opacity:1;
}
}
}
}