In the js code below mouseover event listeners are added to the div elements. This is visualized by a change in the border style.
I am trying to make it so that the mouseover event only fires when the mouse enters from externally, and not when re-entering from one of the child paragraphs.
In other words you can see when moving the cursor from a parent div to one of its children, the cursor is no longer considered over the parent, and when the cursor moves off the child and back onto the parent the mouseover event is called again. I am trying to prevent this event call. Rather it should only trigger when the mouse moves into the div from externally.
side note: I am aware of the :hover css selector but am looking for a javascript solution.
<style>
div, p {
margin: 8px;
padding: 8px;
display: inline-block;
border: 1px dashed grey;
}
</style>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
let rootDivs = document.querySelectorAll("body > div");
for (let rootDiv of rootDivs) {
rootDiv.addEventListener("mouseover", function(event) {
if (event.target === rootDiv) {
event.target.style.borderColor = "green";
event.target.style.borderStyle = "solid";
}
});
rootDiv.addEventListener("mouseout", function(event) {
if (event.target === rootDiv) {
event.target.style.borderColor = "grey";
event.target.style.borderStyle = "dashed";
}
});
}
</script>
