html - 影响多个元素的悬停颜色叠加

Question

这是我所在的位置: http://codepen.io/qdarkness/pen/FyIJh

理想情况下，至少我的想象是，当用户将鼠标悬停在 <a> 上时那<div>的“img-holder”和“tag”都有颜色过渡，“img-holder”中间显示一个“+”。

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

我不希望添加额外的 div，是否可以通过像我尝试的那样将一个类应用到 <div> 来实现？ ？

HTML:

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

CSS:

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

Answer 1

好的，我想我已经了解你想做什么......

我已经 fork 了你的 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;
}

如果这就是您要找的，请告诉我。