通过类似工具提示的DIV

这里传播JavaScript事件是什么，我试图达到的jfiddle：http://jsfiddle.net/fmvmA/通过类似工具提示的DIV

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

此外，我希望能够点击容器内的任何地方，并将tooltip div的副本附加到被点击的位置。这个例子是挑剔的...但如果你设置偏移量，以便工具提示div不再重叠鼠标，那么你可以看到它的工作。

有没有简单的方法来实现我的两个目标？提前致谢。

来源

2012-03-05 ThePromoter

它闪烁，因为它触发鼠标移开时，将显示工具提示，因为#ghost是在容器外..里面移动它，它应该是所有设置..

DEMO

HTML：

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

编辑：具有的#ghost不会隐藏，即使米容器内，当我发现一个bug因此我在#ghost上添加了一个偏移量，所以它在光标下方出现2px。

JS：

$('#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 
    }); 
});

来源

2012-03-05 16:14:56

感谢您的快速响应！我注意到你的解决方案的一件事是，当你将鼠标移出容器时，ghost div不会被隐藏。此外，它将允许您点击容器外部并放置一个盒子。有什么想法吗？ – ThePromoter 2012-03-05 16:48:41

@ThePromoter你试过我的DEMO链接吗？另请参阅我的编辑帖子。 – 2012-03-05 16:55:51

是的，这是我在测试解决方案时使用的链接。如果我慢慢地将鼠标从容器中移出，文本会变得一起变脏，这会导致div的高度增加，因此鼠标再次位于其中。我一定会看到你的解决方案是如何工作的，但无论如何要让鼠标直接指向幽灵的内部，它才能工作。再次感谢你的帮助！ – ThePromoter 2012-03-05 17:05:02

这里是一个可行的演示，你需要调整追加定位了一下。我留下了只按原始演示点击的方法

http://jsfiddle.net/fmvmA/4/

来源

2012-03-05 16:23:31 charlietfl

你的解决方案似乎做的伎俩......但只有当鬼div被定位为脱离鼠标。有没有一种解决方法，以便ghost div基本上将点击事件传递给容器div来处理，还是我只是要求出一些可能性领域的东西？谢谢！ – ThePromoter 2012-03-05 16:52:23

如果您先将幽灵添加到容器中，那么即使鼠标下面有幽灵，鼠标仍然会将容器悬停。否则，你会触发容器的mouseleave。如果先追加，可能需要添加一个类或它的东西...如果clcik没有发生，很容易删除 – charlietfl 2012-03-05 16:58:35

通过类似工具提示的DIV

回答

相关问题