title: Angular 2 mouseover event on div and childs
body: <p>I have a span child in a div.</p>
  
  <p>On my div I have a <code>mouseover</code> event, when I hover on the <code>span</code>, my event triggers.</p>
  
  <p>Simple code:</p>
  
  <pre><code>&lt;div (mouseover)="showOverlay($event, FooBar)" (mouseleave)="showOverlay($event, FooBar)"&gt;
      &lt;span&gt;{{ someDataHere }}&lt;/span&gt;
  &lt;/div&gt;
  
  
   public showOverlay($event, op, element): void {
      op.toggle($event, element);
      $event.preventDefault();
  }
  </code></pre>
  
  <p>What I want is to keep showing my overlay when on child, how do I achieve this?</p>