<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>
Disable mouseout events triggered by child elements
</
title
>
integrity
=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
h2
style
=
"color: green;"
>Geeks for Geeks</
h2
>
<
div
class
=
"parent"
>
<
div
class
=
"child1"
>Child 1</
div
>
<
div
class
=
"child2"
>Child 2</
div
>
</
div
>
</
body
>
<
style
>
.parent{
width: 400px;
height: 400px;
border: 2px Solid black;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: green;
}
.parent > div{
width: 150px;
height: 300px;
border: 2px solid black;
text-align: center;
line-height: 280px;
display: inline-block;
font-family:'Courier New', Courier, monospace;
font-size: larger;
font-weight: bolder;
color: black;
background-color:yellow;
}
</
style
>
<
script
type
=
"text/javascript"
>
window.addEventListener('load', ()=>{
const parent = document.querySelector('.parent');
const child1 = document.querySelector('.child1');
const child2 = document.querySelector('.child2');
const enter = 'Inside';
const exit = 'Outside';
parent.addEventListener('mouseenter', ()=>{
child1.innerText = enter;
child2.innerText = enter;
});
parent.addEventListener('mouseleave', ()=>{
child1.innerText = exit;
child2.innerText = exit;
});
});
</
script
>
</
html
>