Расширение мыши на другом целевом элементе

Question

Это мой первый вопрос. Итак, я попытался запустить mouseover в моем сценарии 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); 
      }); 

Это не будет работать, хотя, как текстовое поле не исчезнет совсем то. У кого-то есть идея?

** EDIT: ** Определяется мой вопрос немного по-другому, я надеюсь, что это не будет, что толку теперь ...

Answer 1

Ok, , когда отображается текст, который вы должны отменить регистрацию мыши над событие от кнопки, чтобы текст не двигался, когда вы наводили указатель мыши на div. Когда текст непрозрачен 0, зарегистрируйте мышь по событию обратно в div.