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);
    });

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

.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

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

将鼠标悬停延伸到另一个目标元素

1 个答案: