css - 图像悬停覆盖 : handle the opacity of nested element

Question

我有这种情况无法按预期工作:

.work-container {
  width: 100%;
  position: relative;
}

img {
  width: 100%;
  height: auto;
}

.overlay-info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background: #eee;
}

.overlay-info:hover {
  opacity: .75;
}

.go-to {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="work-container">
  <img src="http://lorempixel.com/320/240" class="img-responsive">
  <div class="overlay-info">
    <div class="go-to">
      <button type="button" class="btn btn-secondary">Secondary</button>
    </div>
  </div>
</div>

当悬停在图像上时，.overlay-info div 获得 .75 的opacity(它从 0 开始)，但我希望按钮的不透明度为1。有什么想法吗？

Answer 1

你应该使用 rgba 而不是不透明度，如果你使用不透明度，设置不透明度的元素的子元素将继承