title: MouseOut event not working properly
body: <p>On of my designer given the following design.Actually it's a <code>td</code> element.What are the elements are there inside <code>td</code> all are in <code>div's</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/bLuFH.png" alt="enter image description here"></p>
  
  <p>html structure:</p>
  
  <pre><code>&lt;td class="banner"&gt;
   &lt;div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I written a <code>mouseout</code> event on <code>td</code> element,It's working fine but the problem is Even If I move a cursor on any element of the <code>td</code>,Event(<code>mouseOut</code>) is triggering that corresponding function.</p>
  
  <p>What I want,once The cursor is out of <code>td</code>,then only It should be trigger the corresponding function.</p>
  
  <p>What I tried:(I am using <code>marionette and backbone</code> in my Application)</p>
  
  <pre><code>events:{
   "mouseout .consumerCaption":"clearingBannerId",
  },
  clearingBannerId:function(){
    console.log("hi");
  }
  </code></pre>