I have a table that has a bunch of rows that I need to be both editable and deletable. I've made a <div>
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 mouseleave
event, I thought. Unfortunately this is fired when the mouse enters the buttons <div>
too, leading to a feedback loop where the buttons constantly show and hide.
This is quite difficult to describe, but hopefully this is illustrative: https://jsfiddle.net/8d726rqt/
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 pointer-events: none
. This does work, but then the buttons don't receive click events, defeating the point.