Question

我在哪里： http://codepen.io/qdarkness/pen/FyIJh

理想情况下，我至少想象一下，当用户在<a>上方悬停时，<div>的“img-holder”和“tag”都会转换为颜色， “img-holder”在中间显示“+”。

我怀疑<img> <div>内部img无法正常工作，但我正在使用该div来约束<div>宽度和高度。

我不想添加额外的div，这是否可以通过将一个类（如我所尝试的）应用到<li class="b c d"> <a href="" class="link"> <div class="img-holder overlay"><img src="img/test.jpg"></div> <div class="tag overlay"> <h3>test</h3> <h4>test</h4> </div> </a> </li>？

HTML：

.img-holder {
  width: 235px;
  height: 195px;
  overflow: hidden;
}

.tag {
  clear:both;
  position:relative;
  float:left;
  width: 100%;
  overflow:hidden;
  background-color: #FFF;
  text-align: center;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

a:hover .overlay {
  background: #909090;
  z-index: 301;
}

CSS：

{{1}}

Answer 1

好的，我认为我对你想做的事有所了解......

我已经分享了你的Codepen草图：http://cdpn.io/uzfrk

要点是将叠加层absolute放在图片上（相对于.link），然后转换opacity以使其显示。

<old example removed>

更新：带有清理标记和样式的新草图。简单的例子为您的目的。 Codepen草图：http://cdpn.io/zhBcA

要点是与您的容器相关的direct child selector目标元素。

figure:hover > figcaption {
  background: #ccc;
}

figure:hover > .overlay {
  opacity: 0.85;
}

如果您正在寻找，请告诉我。

Answer 2

这可能是你想要的吗？这只是一个简单的方法。

<强>更新

现在覆盖文本区域。

http://codepen.io/anon/pen/tlKCJ

悬停颜色叠加层会影响多个元素

2 个答案: