title: Ignore mouseleave events when absolute positioned elements are covering
body: <p>I have a table that has a bunch of rows that I need to be both editable and deletable. I've made a <code>&lt;div&gt;</code> which contains a couple of buttons that I want to show up in the relevant position when the rows are hovered. This is all fine. I also want the buttons to disappear when the mouse leaves the table itself. OK, I'll use the <code>mouseleave</code> event, I thought. Unfortunately this is fired when the mouse enters the buttons <code>&lt;div&gt;</code> too, leading to a feedback loop where the buttons constantly show and hide.</p>
  
  <p>This is quite difficult to describe, but hopefully this is illustrative: <a href="https://jsfiddle.net/8d726rqt/" rel="nofollow noreferrer">https://jsfiddle.net/8d726rqt/</a></p>
  
  <p>I did try to find an answer already, and there are many where the shown and hidden items are children of the parent element, but that's not the case for me, so these solutions don't work. Furthermore, it's often suggested to use <code>pointer-events: none</code>. This <em>does</em> work, but then the buttons don't receive click events, defeating the point.</p>