>All the reasons why this was not working is because the div I need to show, when the mouse moves over an item in the toolbar, has to be shown on the parent frame. This is required as the toolbar is only 22 pixels in height. As I have one div in the toolbar trying to communicate with another div in the parent frame, as is, it will not work. I made a test by increasing the height of the toolbar and using the same layer for everything and that worked immediately. So, I will see if there is some kind of ways to achieve the same from the parent code, so the toolbar div will be able to detect that the mouseout event is in fact hovering ovetr a div from the parent.
Michel, this is a Chrome-only solution but may be give you some hint for a different approach, if you think this path is worth exploring. On the mouse out event, hovered elements are checked with document.querySelectorAll(":hover"). I say Chrome-only because it's the only browser I saw honoring the real and current hovering. FF and IE/Edge remain on the previous element, the one that is "mouseoutting". Maybe there is a way to make it work in these other browsers, too...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function checkMouseInOtherDiv(out, otherDiv) {
out.innerHTML = "out";
// check to see if the other div is hovered
var oDiv = document.getElementById(otherDiv);
// go through the hover tree
var hoverTree = document.querySelectorAll(":hover");
var otherHovered = false;
for (var index = 0; index < hoverTree.length; index++) {
hover = hoverTree[index];
console.log("hover on " + hover.tagName + ": " + hover.id);
if (hover.id === otherDiv) {
// the mouse is over the other div, do something...
out.style.backgroundColor = "red";
otherHovered = true;
break;
}
}
console.log("is " + otherDiv + " hovered? " + otherHovered);
}
</script>
</head>
<body>
<div id="one" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc" onmouseout="checkMouseInOtherDiv(this, 'two')">
</div>
<div id="two" style="position: absolute; top: 100px; left: 0; width: 100px; height: 100px; background-color: #cc0" onmouseout="checkMouseInOtherDiv(this, 'one')">
</div>
</body>
</html>
----------------------------------
António Tavares Lopes
