Question

我已经创建了弹出窗口，使用jquery播放youtube视频。

HTML：

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

这是我的jsfiddle：http://jsfiddle.net/h5x0c0qr/

当我悬停该图像时，它会显示播放图标和背景颜色，不透明度正确吗？

我需要在悬停状态下显示需要显示背景颜色：粉红色和不透明度以及播放图标。

我无法设置背景颜色。任何人都可以帮助我吗？

提前致谢。

Answer 1

为什么不添加background-color属性？

.videoThum:hover {
    background-image: url('http://www.californiagrinders.com/images/playbutton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: pink; /* Hello Mr. Pink */
}

Answer 2

您无法添加背景颜色的原因在于此处的代码：

.overlaybg {
background: #000;
display: none;
height: 100%;
opacity: 0.7;
position: fixed;
width: 100%;
z-index: 6;
}

您在＆＃34; NONE＆＃34; 上显示，因为它是您尝试重新编码的div的父级，效果没有显现出来。

我建议您取出＆＃34; display：none;＆＃34;

干杯

Answer 3

请参阅js小提琴：http://jsfiddle.net/h5x0c0qr/2/

并添加此css：

.videoThum:hover {
    background-color: pink;
    background-image: url("http://www.californiagrinders.com/images/playbutton.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 209px;
    opacity: 0.9;
    width: 252px;
    z-index: 5;
}

如何在悬停状态下使用不透明度和背景图像设置背景颜色？

3 个答案: