jquery - Bootstrap 弹出窗口打开时淡出背景

Question

我有一个页面，其中包含一些在悬停时打开的 Bootstrap 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;
}

这是我能够实现的目标的 Plunker。 -> http://plnkr.co/edit/orXRUXnVqiGvpeqlnplY?p=preview

覆盖类的 div 被触发，但似乎非常不稳定。覆盖应该被触发，但弹出窗口必须有更大的 z-index 并且应该在它之上。任何帮助表示赞赏。谢谢!

Answer 1

之所以看起来不稳定，是因为每次悬停 anchor 时，叠加层都会妨碍并再次触发悬停事件。要解决此问题，只需为 anchor 提供比叠加层更高的 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;
}

要在悬停 anchor 数据时使叠加层停留:

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