Question

我在悬停在图像上时遇到问题，图像的背景颜色不显示，只有悬停在图像底部才有效。似乎它与我放在图像上的文本有冲突。

以下是示例：https://jsfiddle.net/kani339/ed7g6hjp/6/

HTML：

<section>
  <div class="photo-gallery">

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
      <div class="text-overlay">
        <h2>Header Text</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, sed, molestias autem reprehenderit iure hic quia debitis consequatur tempora numquam quasi amet dolor, distinctio porro magnam dolorum. Tenetur, omnis, nihil.</p>
        <button>Learn More</button>
      </div>
    </div>

  </div>
</section>

CSS：

.layout {
    background: red;
    opacity: 1;
    height: 250px;
    width: 33%;
    float: left;
}

.img-block img {
    height: 250px;
    width: 100%;
    float: left;
}

.img-block img:hover{
    opacity: 0.5;
    cursor:pointer;
}

.text-overlay {
  position:relative;
  text-align: center;
  font-size:14px;
  bottom: 220px;
  color:white;
  visibility: hidden;
}

.layout:hover .text-overlay {
    visibility: visible;
    cursor:pointer;
}

Answer 1

您应该在容器上设置public static void main(String[] args) throws IOException { File sourceDir = new File("/tmp/myapp/assets"); ZipOutputStream zip = new ZipOutputStream(new FileOutputStream("/Users/myuser/archives/assets.zip")); addDir(sourceDir, zip); zip.close(); }而不是:hover标签本身。

img

要在顶部和底部项目之间切换时修复悬停问题，请添加以下内容：

.layout:hover .text-overlay {
  visibility: visible;
}
.layout:hover .img-block img {
  opacity: 0.5;
}

<强> jsFiddle

悬停在具有不透明度的图像上时显示文本

1 个答案: