adjacent mouseover events

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Quick script to test out weirdness observed in more complicated site
    // Sympton: when two rects are adjacent (or quite close), a mouseover one rect into the next one doesn't trigger the mouseover event.
    // So in this case, if the behavior is replicated, you'd expect that as you rollover the red square into the blue one, the red would change opacity but the blue square wouldn't be triggered.
    // In this simple example, the squares behave as expected-- turns out that the problem in more complicated script was a div that was obscuring the 
    var overlay = d3.select("body")
    	.append('div')
    	.attr('class', 'overlay')
    	.text("Random text")
    	.style('font-size', '24px')
    	.style('position', 'absolute')
    	.style('left', '100px')
      .style('top', '195px')
        
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("rect")
    	.attr("id", "blue")
      .attr("y", 200)
      .attr("x", 120)
    	.attr("width", 100)
      .attr("height", 100)
      .attr("fill", "blue")
    
    svg.append("rect")
    	.attr("id", "red")
      .attr("y",110)
      .attr("x", 120)
    	.attr("width", 100)
      .attr("height", 100)
      .attr("fill", "red")
    
    svg.selectAll('rect').on("mouseover", function() {
      
      d3.select(this).attr('opacity', 0.2)
    }).on("mouseout", function() {
      
      d3.select(this).attr('opacity', 1)
    })

</script>
</body>

https://d3js.org/d3.v4.min.js