logo标签列表

将一个div放在另一个div后面但仍然显示在上面？

javascriptjqueryhtml
3

好的，这个问题可能听起来有些复杂，或者至少很深奥，但我会尽力阐述。

在我的图表应用程序中，我有一个用作弹出工具提示的div。当您悬停在数据点上时，此工具提示将显示一些信息。我使用z-index使工具提示呈现在底层图表div之上。然而，底层图表具有鼠标事件的交互性，那么是否有可能让底层图表在鼠标悬停在工具提示上时仍能注册鼠标事件？

4个回答
2

您可以捕获鼠标事件，并记录坐标，然后将这些坐标添加到工具提示相对于页面的实际位置。接着，您可以使用这些坐标重新触发一个虚假的MouseEvent，在底层元素上减去基础div元素的坐标。

现在这可是一个非常出色的解释，我无法反驳！而且实际上，我认为这是唯一可行的方法。 - tomsseisums
我原本认为在特定页面坐标上伪造点击事件是不可能的。我错了吗？ - user113716
Delan - 感谢提供的链接，但似乎表明它不支持IE。我还看到了这篇SO文章，似乎表明它不支持跨浏览器。https://dev59.com/hHE85IYBdhLWcg3wSxkv - user113716
嗯，我会试一下这个。由于应用程序面向有限的受众群体，所以我不需要IE兼容性。我使用jQuery框架，因此可以直接使用event.pageX/event.pageY，而无需手动计算绝对坐标。 - Razor Storm
2

虽然我同意关于捕获鼠标事件的答案，但我认为有一个解决方法。只需将工具提示div稍微偏离鼠标光标的位置。这样它永远不会出现在鼠标光标下面，也不会被点击。

哦，工具提示不会出现在与鼠标光标相关的位置，而是相对于所选数据点出现。这是因为在某些数据集中有大量的数据，这样更清楚地显示所选的点。不过这是个好建议。 - Razor Storm
2
我更喜欢这个解决方案。虽然不太酷，但实现起来要简单得多。只需使用工具提示的mouseOver事件，将其向左/右移动框的宽度或向上/下移动工具提示的高度即可。我唯一看到的问题是如果用户想复制工具提示文本 :) - abelito
1

我不确定在你的情况下是否实用，但是你可以将工具提示附加为数据点的子元素。这样它仍然是图表的一部分。

这实际上是一个相当简单而优雅的解决方案。我最喜欢它，但问题在于所有数据点都只是绘制在画布标签上。然而，我可能只需将工具提示附加到包含画布标签的div上（无论如何，div会触发鼠标事件），然后使用绝对定位即可。 - Razor Storm
0

实际上，在支持CSS3的浏览器上，pointer-events是最简单的解决方案。:)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接