将鼠标悬停扩展到另一个目标元素

Question

这是我的第一个问题。因此，我尝试在 D3 脚本中运行鼠标悬停，以便在将鼠标移到某个按钮上时触发悬停的文本字段（这是一个div 对象）。到目前为止效果很好。

var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
.
.
.
node.append("foreignObject")
    .attr("class", "info")
    .attr("x", 55)
    .attr("y", -85)
    .attr("width", 30)
    .attr("height", 30)
    .append("xhtml:body")
    .html('<img src="images/information-icon.png" width=20 height=20>')
    .on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", 0.9);
        div.html("text")
            .style("left", (d3.event.pageX - 5) + "px")
            .style("top", (d3.event.pageY - 10) + "px");
    })
    .on("mouseout", function (d) {
        div.transition()
            .duration(500)
            .style("opacity", 0);
    });

现在的问题是，一旦我将鼠标从按钮上移开，文本字段就会消失。我不知何故想将鼠标悬停目标从按钮"扩展"到文本字段，以便我仍然可以单击它上面的链接等。有人知道如何建立它吗？我已经尝试将鼠标退出事件放在我的文本字段上，就像这样：

.on("mouseover", function (d) {
        div.transition()
            .duration(200)
            .style("opacity", 0.9);
        div.html("text")
            .style("left", (d3.event.pageX - 5) + "px")
            .style("top", (d3.event.pageY - 10) + "px")
            .on("mouseout", function (d) {
                div.transition()
                    .duration(500)
                    .style("opacity", 0);
            });

但这行不通，因为文本字段根本不会消失。有人有想法吗？

**

编辑：**定义我的问题有点不同，我希望现在不会那么混乱......

Answer 1

好的，显示文本时，应从按钮取消注册鼠标悬停事件，以便在将鼠标悬停在div 上时文本不会移动。当文本不透明度为 0 时，将鼠标悬停事件注册回div。