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

Question

我使用html,css and 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');
}

Answer 2

HTML

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

CSS

.videoThum .youTubeVideo {
    position: relative;
}
.videoThum .youTubeVideo .icon {
    display:none;
    position: absolute;
    top: 50px; // Set icon position you want
    left: 50px; // Set icon position you want
}
.videoThum .youTubeVideo:hover {
    display: block;
}