Question

当我悬停内容时，我只希望显示图像并隐藏内容/文本。我的代码在这里显示，当我悬停内容时，图像可见但内容也会显示。我试着寻找这个问题的解决方案但是不幸的是，我没有看到像这样的类似问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

将一个子选择器添加到：hover陈述并随意隐藏

＆＃13;

.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-one:hover > .menu-content{
  opacity:0; transition:opacity 500ms ease;
}

.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-two:hover > .menu-content{
  opacity:0; transition:opacity 500ms ease;
}

＆＃13;

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

＆＃13;

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

2 个答案: