Question

当我将鼠标悬停在图片上时，播放按钮会显示，而background-color的{{1}}和opacity会发生变化。

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

.youTubeVideo

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

DEMO

Answer 1

问题在于，当您将鼠标悬停在.videoThum的右侧时，您不再在.youTubeVideo上空盘旋，因此.youTubeVideo:hover将不会生效。

由于.videoThum包含.youTubeVideo，您可以在.youTubeVideo悬停.videoThum时触发更改，而不是将.youTubeVideo:hover更改为.videoThum:hover .youTubeVideo。< / p>

.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小提琴： http://jsfiddle.net/bq9rgzap/

Answer 2

您的背景图片覆盖整个元素。

查看此修改后的fiddle并更改background-size以查看问题。

解决此问题的一种方法是使用带有透明度的png图片或带有pseudo的{{1}}元素

请参阅CSS: set background image with opacity?

CSS背景颜色在悬停状态下无效

2 个答案: