Question

我有一些照片，我想要悬停我希望用background: black;覆盖它们我想用黑色覆盖整个图像。悬停效果不会出现。我怀疑问题出在CSS选择器中。这是小提琴：http://jsfiddle.net/20oomme4/3/

Answer 1

我测试了你的小提琴，它正在发挥作用。我修改了颜色并再次测试 - 它再次起作用。但是，你的图像是断开的链接，所以我可以很容易地看到背景颜色。我的猜测是你的图像是不透明的，因此，你无法看到它们背后的颜色。

最好的办法是创建两个图像 - 一个是正常颜色，另一个是黑色。调用正常图像＆＃34; NormalImage.jpg＆＃34;并将黑色背景称为＆＃34; NormalImage_black.jpg＆＃34;。然后，onhover，替换＆＃34; .jpg＆＃34;与＆＃34; _black.jpg＆＃34; - 并在mouseout上，替换＆＃34; _black.jpg＆＃34;使用＆＃34; .jpg＆＃34;。如果您在使用css时遇到问题，请尝试使用Javacsript - 并记住在page_load上加载所有图像（但隐藏backgorund图像），这样当有人徘徊时，浏览器就不必加载图像 - 它只需要显示它。

Answer 2

我不确定你想要什么。如果您想要透明背景来覆盖图像。

jsfiddle

另外，你需要使用透明的png来改变图像本身的白色到黑色背景。

.img-responsive.products {
border: 1px solid black;
cursor: pointer;   
}

figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption {
height: 100%;
width: 100%;
opacity: 0;
color:#fff;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
.col-sm-3:hover figcaption {
opacity: 0.4;
}

Answer 3

悬停效果按预期工作，问题是图像占据了整个区域，因此您无法看到任何背景效果。尝试给图像padding:20px;以查看背景变化。如上所述，您需要创建一个图像精灵或将图像更改为透明的.png，以便更改完整的背景。例如：http://jsfiddle.net/20oomme4/6/

Answer 4

检查此fiddle

这与您使用的CSS相同，即

.img-responsive.products:hover {
    background-color: black;
}

唯一的问题是我使用了没有背景的png图像。正如您可以在小提琴中看到的，您的代码可以正常工作。

所以，正如我在评论中提到的，我建议您使用没有任何背景的png图像。

悬停效果不起作用

4 个答案:

检查此fiddle