Question

我有一个页面，其中包含一些在悬停时打开的Bootstrap Popovers。为了强调popover上的内容，我试图在阅读器悬停在弹出窗口时淡出背景，当他们点击外面或将鼠标光标移离popover时删除背景淡出。

到目前为止，我已经能够在悬停时获得叠加效果，但它不会触发弹出窗口。

JS：

<script>
    $(document).ready(function(){
        $(".pop").hover(
          function(){$(".overlay").show();},
          function(){$(".overlay").hide();}
        );
    });
</script>

CSS：

.overlay {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1200;
    display: none;
}

这是我能够实现的东西。 - ＆GT; http://plnkr.co/edit/orXRUXnVqiGvpeqlnplY?p=preview

覆盖类的div被触发但似乎非常不稳定。覆盖应该被触发，但是popover必须具有更大的z-index并且应该高于它。任何帮助表示赞赏。谢谢！

Answer 1

它看起来不稳定的原因是因为每次锚点悬停时，叠加层都会挡住并再次触发悬停事件。要解决此问题，只需为锚点提供比叠加层更高的z-index：

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  display: none;
}
.pop {
  position: relative;
  z-index: 2;
}

在悬停锚点数据时使叠加层保持不变：

$(document).on("mouseover", ".popover", function() {
  $(".overlay").show();
});
$(document).on("mouseout", ".popover", function() {
  $(".overlay").hide();
});

当Bootstrap popover打开时淡出背景

1 个答案: