Jquery 当引导popover打开时淡出背景

我有一个页面，上面有几个引导弹出框，在悬停时打开。为了强调popover上的内容，我尝试在阅读器悬停在popover上时淡出背景，并在他们单击外部或将鼠标光标移离popover时移除背景淡出

到目前为止，我已经能够在hover上获得叠加效果，但它不会触发popover

JS:

这是我所取得的成就的一部分。->

---

带有overlay类的div将被触发，但看起来非常不稳定。覆盖应该被触发，但是popover必须有一个更大的z索引，并且应该在它上面。感谢您的帮助。谢谢

它看起来不稳定的原因是，每次锚悬停时，覆盖都会阻碍并再次触发悬停事件。要解决此问题，只需为锚定提供比覆盖更高的z索引：

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

---

谢谢这部分解决了我的问题。但是，当popover内容悬停时，覆盖需要保留。我尝试添加

$（“.popover”）.hover（）到JS并隐藏/显示覆盖。但是，这似乎不起作用。有什么想法吗？它不起作用，因为.popover div是在加载文档后添加的。要使其工作，即使在加载文档后，也必须使函数运行。我用一种方法更新了答案。我一直想知道为什么DocumentReady在Popover上从来都不起作用。不知道它是在实际文档加载之后加载的。回答得很好。谢谢对于任何想要更新解决方案的人-
.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();
});