MouseOut Triggers When Mouse Enters An Element

JavaScript
1

On my page there is an empty DIV and when you click in it a table appears. Then when you hover the mouse over the table it disappears and that’s not the behavior I want. I would like the table to disappear only after the mouse cursor had exited the table.

Please see my script

2

The trick to this is that technically the mouse moves ‘out’ of the table when it enters the cells of the table.

Because you can snoop up the tree, e.relatedTarget becomes relevant to you. (In IE, you may need to invoke e.toElement instead)

If the relatedTarget is the #surface div, hide the table.

3

Hi, Thanks for your reply. Your solution works if #surface is empty but as soon as I fill it with other elements and cover it entirely, it no longer works.

Is there a way to make it work regardless of what the outer environment of the table is?

4

It becomes more complex because of the nature of browsers and scoping, but essentially you can run a while loop in reverse, walking up the tree to see if the node being entered is inside the table: (Code UNTESTED)

var target = e.relatedTarget;
while(target != document) {
   if(target == this) {
      return;
   }
   target = target.parentNode;
}
//If we get here, we didnt hit the Test node.
modal.display = "none";
6

Hi thanks for replying. I was not able to get your solution to work so I came up with a different approach than your solution.

I decided to give the outer DIV with the id of modal and each of its children a class of tool.
Then in the listener function I check if e.relatedTarget.className.includes(“tool”) or if e.target.className.includes(“tool”).

This works for me, however if you can make your solution work please let me know.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.