Question

<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>

我有panel这样的情况，当我overlay时，我需要hover。在这里，我使用background-color:black制作背景black。

但问题出现在hover黑色只出现在panel-body，而我在panel-default使用

如何在overlay

上的hover上panel

Answer 1

背景颜色落在图像后面，因为图像是替换元素。添加另一个样式规则以在悬停时隐藏图像：

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

jsFiddle

Answer 2

另一种选择是使用绝对放置的叠加元素，但@ symlink的答案要短得多。

  $scope.deleteEvent= function() {
        var index = $scope.events.indexOf(selectedObj);
        $scope.events.splice(index, 1);

  };

.panel-default {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: none;
}
.panel-default:hover .overlay {
  display: block;
}

Answer 3

您可以将filter属性用于image：

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);
}

jsfiddle-link

悬停时css html更改面板

3 个答案: