html - 如何在悬停时隐藏内容并仅显示图像？

Question

当我悬停内容时，我只想显示图像并隐藏内容/文本。我的代码在这里显示，当我将鼠标悬停在内容上时，图像是可见的，但内容也会显示出来。我试着为这个问题寻找解决方案，但是不幸的是，我没有看到任何类似的问题。

.section-four {
  display: flex;
  justify-content: center;
  height: 100vh;
}
.menu-one {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
}
.menu-content {
  position: absolute;
  width: 100%;
}
.menu-one:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  max-height: 100%;
  background-repeat: no-repeat;
}
.menu-two {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
  left: 5em;
}
.menu-two:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  background-repeat: no-repeat;
  max-height: 100%;
}

<section class="section-four">
  <div class="menu-one">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
  <div class="menu-two">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
</section>

Answer 1

您可以隐藏内容:

.menu-one:hover > div.menu-content,
.menu-two:hover > div.menu-content {
  display: none;
}

例子:

.section-four {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.menu-one {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
}

.menu-content {
  position: absolute;
  width: 100%;
}

.menu-one:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  max-height: 100%;
  background-repeat: no-repeat;
}

.menu-two {
  position: relative;
  margin-top: 2em;
  width: 25%;
  height: 50%;
  left: 5em;
}

.menu-two:hover {
  background: url(https://images.unsplash.com/photo-1468769458611-1c88091fcd94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=450fec2cc9917ca22622cdcadc8541ab&auto=format&fit=crop&w=1041&q=80);
  background-repeat: no-repeat;
  max-height: 100%;
}

.menu-one:hover>div.menu-content,
.menu-two:hover>div.menu-content {
  display: none;
}

<section class="section-four">
  <div class="menu-one">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
  <div class="menu-two">
    <div class="menu-content">
      <h2>Menu Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt blanditiis nisi ipsum, nesciunt, nemo autem voluptatibus accusamus obcaecati debitis molestiae. Est labore repellendus delectus error a modi quod dolor.</p>
    </div>
  </div>
</section>