Question

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

This是我到目前为止的内容，但是如您所见，它还不完整。

即使我已将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>

fiddle中的源Scss

Answer 2

您要将不透明度设置为0和1。而是将set display设置为none并阻止它，它将起作用。原因不透明度仅控制透明度，但它会存在并占据空白，而显示设置为无则不是这种情况。

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

Does opacity:0 have exactly the same effect as visibility:hidden

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

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

3 个答案: