html - CSS 背景颜色在悬停状态下不起作用

Question

当我将鼠标悬停在图像上时，播放按钮会显示，.youTubeVideo 的background-color 和opacity 会发生变化。

但是，当您将鼠标悬停在播放按钮上时，不会发生这种情况。将鼠标悬停在播放按钮上时，如何更改 .youTubeVideo 的 background-color 和 opacity？

.youTubeVideo:hover {
  opacity: 0.5;
  background-color: green;
}
.videoThum:hover {
  background-color: green;
  background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<div class="col-3">
  <div class="videoThum">
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo">
      <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" />
    </a>
  </div>
  <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a>
    <a href="#">
      <p>2015 Syed Modi International India Masters SF [WS]</p>
    </a>
  </div>
</div>

DEMO

Answer 1

问题是，当您将鼠标悬停在 .videoThum 的右侧时，您不再将鼠标悬停在 .youTubeVideo 上，所以 .youTubeVideo:hover 不会生效。

由于 .videoThum 包含 .youTubeVideo，当 .videoThum 悬停时，您可以触发对 .youTubeVideo 的更改而是将 .youTubeVideo:hover 更改为 .videoThum:hover .youTubeVideo。

.videoThum:hover {
  background-color: green;
  background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.videoThum:hover .youTubeVideo {
  opacity: 0.5;
  background-color: green;
}

<div class="col-3">
  <div class="videoThum">
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo">
      <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" />
    </a>
  </div>
  <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a>
    <a href="#">
      <p>2015 Syed Modi International India Masters SF [WS]</p>
    </a>
  </div>
</div>

JS fiddle : http://jsfiddle.net/bq9rgzap/