鼠标悬停在Raphael SVG路径上的工具提示上

Question

我使用Raphael Sketchpad (Raphael下的库)绘制SVG路径。我想在路径上发生鼠标悬停事件时触发事件，但是我尝试了关于这个主题的所有示例，没有任何帮助，当我击中路径元素时，鼠标悬停事件不会触发，但是我可以轻松地将鼠标悬停事件侦听器附加到SVG容器，但这不是我想要实现的。

下面是呈现的HTML

代码片段

        <div id="sketchpad" style="-moz-user-select: text;">
            <div class="box" id="demo-mouse" style="-moz-user-select: text;">
                <div style="background-color: rgba(255, 255, 255, 0.3); cursor: crosshair; -moz-user-select: text;" id="canvas">
<svg height="750" version="1.1" width="1200" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; -moz-user-select: text;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" d="M287,226L311,259L337,280L349,287L359,294L378,309L396,318L399,320L405,323L406,325L408,328L409,328L410,329L411,329L413,326L414,320L416,296L418,280L418,267L420,233L423,220L427,208L430,186L432,177L432,174L432,160L432,157L432,150L430,139L429,134L429,129" stroke-opacity="1" stroke-width="1" stroke-linecap="round" text-anchor="" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)"/>
                </div>
            </div>
        </div>

JS代码，放在一个document.ready:

$(document).ready(function () {
$("#sketchpad path").on("mouseover", function() {
   console.log("HIT"); // Nothing happens
})
});

有什么建议吗?

我的目标是在鼠标点击路径(如QTip)时在鼠标位置上显示一个工具栏。

Answer 1

try this

$("#sketchpad").on("mouseover", "path", function() {
   console.log("HIT");
})

甚至更好——使用Raphael的原生方法Element。鼠标移至 http://raphaeljs.com/reference.html Element.mouseover