title: mouseenter/mouseleave ignoring covering element
body: <p>It seems that the <strong>mouseenter</strong>/ <strong>mouseleave</strong> method is trigger not only when the mouse's coordinate enters the target's client rectangles, but also when another element uncover or cover the target. This is a problem because in my <strong>mouseenter</strong> callback, I want to display another element  E on top of the target. I also want E to disappear upon <strong>mouseleave</strong>. You can think of this as a overlapping tooltip.</p>
  
  <p>However, when I move my mouse onto the target, <strong>mouseenter</strong> is fired and element E will cover it. This coverage futher triggers a <strong>mouseleave</strong> event, so E will disappear. This further triggers a <strong>mouseenter</strong> event so E will appear again..... Which is quite a headache.</p>
  
  <p>So basically, I am wondering whether there is a version of <strong>mouseenter</strong>/ <strong>mouseleave</strong> that only care about whether the mouse enters or leaves the client rectangles of the target, regardless whether the target is covered or not.</p>
  
  <p>update: @arunopjohny created a JS fiddle to illustrate this problem. See comments</p>