css html更改面板悬停 .panel默认值：悬停{ 背景色：黑色； } 面板页脚 小组标题 面板页脚

我有一个像这样的

面板

，我想在

悬停时覆盖它。
在这里，我使用
背景色：黑色
来制作背景
黑色

但问题在于，当我在
面板默认设置中使用时，黑色仅出现在
面板主体上

如何在
面板上的
悬停
上制作
覆盖
背景色落在图像后面，因为图像是替换的元素。添加另一个样式规则以隐藏悬停时的图像：

<style>
.panel-default:hover{
    background-color: black;
}
</style>

<div class="container">
  <h2>Panel Footer</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body"><img src="http://www.gettyimages.co.uk/gi-resources/images/frontdoor/creative/Embed/hero_dog_482206371.jpg" /></div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

另一种选择是使用绝对放置的覆盖元素，尽管@symlink的答案要短得多


.panel默认值{
位置：相对位置；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：黑色；
显示：无；
}
.panel默认值：悬停.overlay{
显示：块；
}

面板页脚
小组标题
面板页脚
您可以对
图像使用
过滤器
属性：

.panel-default:hover img{
    visibility:hidden;
}

请更改标题。标题与您的真实问题不匹配，您的代码运行良好@ketan很抱歉标题图片下方的背景为黑色。。我也想要背景在图像上。。
img {
  -webkit-filter: opacity(1);
  -moz-filter: opacity(1);
  filter: opacity(1);
}
img:hover {
  -webkit-filter: opacity(0);
  -moz-filter: opacity(0);
  filter: opacity(0);
}