html - 如何在图像悬停状态下设置播放按钮？

Question

我使用 html、css 和 jquery 创建了弹出式播放 youtube 视频。

现在我需要在悬停图像时显示、播放按钮。

这是我试过的代码，

http://jsfiddle.net/495vbwy2/

我可以知道怎么办吗？

HTML:

  <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="slide-2.jpg"/></a></div>
</div>

当我这样锻炼的时候，

.guideBox .videoThum a:hover{color:#000; opacity:1;}

这是行不通的。我可以知道怎么做吗，

谁能帮帮我。提前致谢。

Answer 1

试试这个。根据需要更改颜色和不透明度。

.youTubeVideo:hover {
    opacity:0.5;
    background-color:#ffffff;
    background-image:url('image.png');
}