通过工具提示（如div）传播javascript事件

以下是我试图实现的目标：

我在这个例子中面临两个问题；我认为这两者都与事件传播有关。当鼠标进入容器时，我想让一个div跟随光标。当光标离开容器时，以下div应该消失。这看起来应该很简单…但是我遇到了当你移动鼠标时div闪烁的问题，我猜是因为当tooltop div出现时，鼠标从技术上来说是离开容器的

此外，我希望能够单击容器内的任何位置，并将工具提示div的副本附加到单击的位置。这个例子很挑剔……但是如果您设置了偏移量，使工具提示div不再与鼠标重叠，那么您就可以看到它工作了

---

有什么简单的方法可以实现我的两个目标吗？提前感谢。

它会闪烁，因为它会在显示工具提示时触发鼠标移出，因为“幽灵”在容器外部。。把它移到里面，它就应该都准备好了

HTML:

<div id="container">
  <div id="ghost">
    Click to drop me!
  </div>
</div>

$('#container').on('mousemove', function(event) {
    $('#ghost').css({
        left: event.pageX - $('#ghost').width() / 2,
        top: ((event.pageY - $('#ghost').height() / 2) + 2) // +2 px is the offset
    });
});

---

这是一个有效的演示，您需要稍微调整一下附加位置。我坚持按照最初的演示只在点击时添加内容的方法

---

感谢您的快速回复！我注意到您的解决方案中的一点是，当您将鼠标移出容器时，ghost div不会被隐藏。此外，它将允许您单击容器外部并放置一个框。有什么想法吗？@Promoter你试过我的演示链接吗？另请参阅我的编辑帖子。是的，这是我在测试您的解决方案时使用的链接。如果我慢慢地将鼠标从容器中移出，那么文本会被压缩在一起，这会导致div的高度增加，因此鼠标再次位于其中。我当然明白你的解决方案是如何工作的，但是，当鼠标直接指向幽灵内部时，有没有办法让它工作呢？再次感谢你的帮助！如果我将重影的宽度设置为某个已知的值，我就能够实现您的解决方案……以避免文本压缩。我会接受你的答案，但我仍然很好奇，当鼠标指针在ghost内部时，是否有办法做到这一点：）你的解决方案似乎很管用……但前提是ghost div的位置要远离鼠标。是否有一种解决方法，使ghost div实际上将click事件传递给container div来处理，还是我只是在请求一些可能性之外的东西？谢谢如果您先将重影附加到容器，则即使在鼠标下有重影，鼠标仍将在容器上悬停。否则会触发容器的鼠标删除。如果先追加，可能需要向其中添加一个类或其他东西……如果没有发生clcik，那么很容易删除