title: mouseover event on two overlapping shapes
body: <p>Hi I have two shapes that are overlapping (implementation in KineticJs). I want to change the color of these shapes if the mouse hovers above them. In case the mouse hovers above the overlapped(intersection) area, I want both the shapes to change color. However only the top most shape is changing color. </p>
  
  <p>Example at <a href="http://jsfiddle.net/sandeepy02/NST8C/" rel="nofollow">http://jsfiddle.net/sandeepy02/NST8C/</a> where I want the colour of both rect to be black if I hover mouse over the pverlapped area.</p>
  
  <pre><code>stage = new Kinetic.Stage({
      container: "container",
      width: 320,
      height: 320
  });
  layer = new Kinetic.Layer();
  elemOne = new Kinetic.Rect({
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 0,
      draggable: false
  });
  elemOne.on('mousemove', function() {
      this.setFill("black");
      this.setZIndex(10);
      layer.draw();
  });
  elemOne.on('mouseout', function() {
      this.setFill("red");
      this.setZIndex(1);
              layer.draw();
  });
  elemTwo = new Kinetic.Rect({
      x: 150,
      y: 150,
      width: 100,
      height: 100,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 0,
      draggable: false
  });
  elemTwo.on('mousemove', function() {
      this.setFill("black");
      this.setZIndex(10);
              layer.draw();
  });
  elemTwo.on('mouseout', function() {
      this.setFill("green");
      this.setZIndex(1);
               layer.draw();
  });
  layer.add(elemOne);
  layer.add(elemTwo);
  stage.add(layer);
  </code></pre>