Javascript mouseout/mouseleave在svg path元素中移动鼠标时被激发

我正在使用d3库创建时间线。 它在父SVG元素中有几个路径元素，如下所示：

 <path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(585,61)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>

我正在初始化顶部的工具提示，如下所示：

 var tooltip = d3.select('#timeline1')
        .append("div")
        .attr("class", "timeline-tooltip")
        .style("visibility", "hidden")
        .text("Invalid Date"); 

这是我的css

.timeline-tooltip {

  color: black;
    font-size: x-small;
    border-top-width: 5px;
    border-top-color: rgb(149, 206, 254);
    border-top-style: solid;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    box-shadow: 2px 2px 2px rgba(105, 102, 102, 0.7);
    position: fixed;
    z-index: 10;
}

---

今天我遇到了同样的问题，在谷歌搜索之后，我发现了这个问题。在我的例子中，问题是我在我的计算机上设置了以下CSS属性：

路径{fill:none；}

这将导致鼠标移动/移出事件仅在路径笔划上触发，而不是在路径区域的内部/外部触发。要修复此问题，请将css更改为：

path{fill:transparent；}

这将设置鼠标事件的行为与预期一致：进入区域时触发鼠标悬停，离开区域时触发鼠标悬停

看这把小提琴：

将元素的属性设置为all（或其他适合您的值）

---

这将使鼠标悬停在不考虑填充的情况下工作。

以防万一其他人有此问题，发现此页面并像我一样愚蠢：我有相同的症状，但突然意识到我正在尝试添加工具提示的svg元素上绘制工具提示。最终结果：工具提示一出现，mouseleave事件就会触发；这当然是完全合理的，因为鼠标刚刚离开了底层svg元素，因为它现在位于工具提示的顶部

---

解决方案：确保工具提示的位置不可能与鼠标所在的位置重叠。

我们能得到一个JSFIDLE吗？JSFIDLE会有很大帮助。我可以问一下事件处理程序连接到哪些元素吗？您是将事件处理程序附加到父元素还是子元素？另外，这里还有一个指向另一个StackOverflow的链接，这可能会有所帮助：我尝试在JSFIDLE中重新创建它，但没有遇到任何问题：嗯，我建议进一步隔离这个问题。与中一样，尝试删除所有可以删除的代码，但不会“隐藏”问题。这就是您的代码吗？您是否尝试过使用

mouseenter

和

mouseleave

？根据我的经验，这两种方法比

mouseout

和

mouseover

更好地协同工作。透明填充不是SVG规范的一部分，尽管许多UAs都支持它。不过，使用指针事件属性更有效。或者使用指针事件：无使工具提示对鼠标事件透明，这样就不会首先生成鼠标离开。你并不孤单，我的朋友们只是在这方面浪费了三十分钟：（我对你感激不尽——我花了半天的时间在这上面。谢谢你在这里分享这篇文章。我也犯了同样的错误。

.timeline-tooltip {

  color: black;
    font-size: x-small;
    border-top-width: 5px;
    border-top-color: rgb(149, 206, 254);
    border-top-style: solid;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    box-shadow: 2px 2px 2px rgba(105, 102, 102, 0.7);
    position: fixed;
    z-index: 10;
}

pointer-events="all"