Issue With Mouse Over And Mouse Out D3.js

I have the following code: I have two small circles appearing on mouseover of large circle. The problem I face is - when I move mouse over to the smaller circles it will disappear,

Solution 1:

The two possible ways to resolve this issue.

1. Using toElement property of d3 event.
2. Group smaller circles and big circle within a separate <g> element.

Method 1:

d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select("circle").on("mouseover", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
  var sCircle1 = d3.selectAll(".node-hover-button")[0][0];
  var sCircle2 = d3.selectAll(".node-hover-button")[0][1];
  if (d3.event.toElement != sCircle1 && d3.event.toElement != sCircle2) {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
  }
});

//attach a click event on .node-hover-button.

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script><svg><gtransform="translate(100,50)"><rectx="50"y="-30"width="50"height="60"id="yesDecision"class="hoverNodeundefined"style="fill: rgb(51, 110, 123);"></rect><textx="80"y="0"class="id ">Yes</text><circleclass="node fixed"r="58"style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);"transform="scale(1.0)"></circle><textx="0"y="20"class="id">Segment</text><rectclass="edit-event node-hover-button"x="-20"y="-70"height="29"width="29"rx="15"ry="15"></rect><rectclass="delete-event node-hover-button"x="-54"y="-54"height="29"width="29"rx="15"ry="15"></rect></g></svg>

Method 2:

d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select(".nodes").on("mouseover", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
  d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
});

//attach a click event on .node-hover-button.

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script><svg><gtransform="translate(100,50)"><rectx="50"y="-30"width="50"height="60"id="yesDecision"class="hoverNodeundefined"style="fill: rgb(51, 110, 123);"></rect><gclass="nodes"><textx="80"y="0"class="id ">Yes</text><circleclass="node fixed"r="58"style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);"transform="scale(1.0)"></circle><textx="0"y="20"class="id">Segment</text><rectclass="edit-event node-hover-button"x="-20"y="-70"height="29"width="29"rx="15"ry="15"></rect><rectclass="delete-event node-hover-button"x="-54"y="-54"height="29"width="29"rx="15"ry="15"></rect></g></g></svg>