Registering mouseover event through layers of divs?

JavaScript
1

working w/the code below as a base from http://bl.ocks.org/mbostock/1062544
I have placed it absolutely and overlaying it there is a div w/some text in it. It has a semi transparent .png for background image.
That div is centered, margin:0 auto;
I was hoping that a mouse over it would still trigger the reaction from the js. It doesn’t. How can i fix that?

var width = Math.max(1960, innerWidth),
    height = Math.max(1500, innerHeight);

var i = 0;

var svg = d3.select("html").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

function particle() {
  var m = d3.mouse(this);

  svg.insert("circle", "rect")
      .attr("cx", m[0])
      .attr("cy", m[1])
      .attr("r", 1e-6)
      .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
      .style("stroke-opacity", 1)
    .transition()
      .duration(2000)
      .ease(Math.sqrt)
      .attr("r", 100)
      .style("stroke-opacity", 1e-6)
      .remove();
	  
  svg.insert("rect", "rect")
      .attr("x", 50)
	  .attr("y", 50)
	  .attr("width", 50)
	  .attr("height", 50)
	  .attr("x", 1e-6)
	  .attr("y", 1e-6)
      .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
      .style("stroke-opacity", 1)
     .transition()
      .duration(2000)
      .ease(Math.sqrt)
      .attr("x", 100)
	  .attr("y", 100)
      .style("stroke-opacity", 1e-6)
      .remove();
  d3.event.preventDefault();
}

thank you
D