Question

我有一种情况，当一些div悬停在调用工具提示上。我有重新定位逻辑，以防工具提示不适合屏幕。但是我遇到了一个问题（特别是在FireFox中），当工具提示在“调用者”div上移动时，“调用者”div会失去其悬停状态。这在FF中是100％可重现的，在Chrome中可以在某些机器上运行，而在某些机器上则不然。

这有什么解决方案吗？我已经创建了jsfiddle来展示这个。你会看到动画被取消了 - 是的，我可以在这么简单的情况下做一些解决方法但是reall情况要复杂得多。

jsfiddle.net/5c1fdw6o/9/

Answer 1

您可以将CSS：pointer-events: none;应用于顶层。

在你的情况下：

.sliding-tooltip {
    pointer-events: none;
}

Answer 2

我建议切换html div，以便跨度高于另一个div。

<div class="container">
  <div class="sliding-tooltip">
    I slide to the right
  </div>
  <span class="hover-item">Hover me!</span>
</div>

如果这还不够，你可以在两个元素上使用z-index来确保div始终位于另一个元素之上。但请确保将跨度定位为相对。

.hover-item {
  color: blue;
  position: relative;
  z-index: 10;
}

如何在上部元素通过时保持底层元素悬停

2 个答案: