javascript - Jquery 鼠标悬停回调不起作用

Question

我在 d3 中创建了 SVG 圆形元素。

<circle cx="0" cy="0" r="50" id="tooltip_area" stroke-width="0.6" style="fill: none; stroke: white;"></circle>

我试图在这个圆圈上创建鼠标悬停效果，但该事件从未被触发。

这是悬停代码-

$('#tooltip_area').mouseover(function(event) {
  div.transition()
    .duration(200)
    .style("opacity", .9);
  div.html('Hi, This is Sample Text')
    .style("left", (event.pageX) + "px")
    .style("top", (event.pageY + 28) + "px");
});

我不确定为什么悬停代码没有被触发

Answer 1

我认为你应该使用

hover

悬停效果事件。这是悬停事件如何工作的示例

$(".area").hover(function(){
    //This function executes when your mouse pointer enters the area.
    alert("You entered.");
},
function(){
    // This function executes when your mouse pointer leaves the area.
    alert("You left.");
});