J'ai trouvé un vieux cours du Site Du Zero d'il y a 10 ans. Quand je rentre ce script dans Notepad et lance dans Chrome, il ne se passe rien avec le mouseover, c'est normal ?

<p id="result"></p>
<div id="parent1">
Parent N°1<br />
Mouseover sur l'enfant
<div id="child1">Enfant N°1</div>
</div>
<div id="parent2">
Parent N°2<br />
Mouseout sur l'enfant
<div id="child2">Enfant N°2</div>
</div>
<script>
var child1 = document.getElementById('child1'),
child2 = document.getElementById('child2'),
result = document.getElementById('result');
child1.addEventListener('mouseover', function(e) {
result.innerHTML = "L'élément quitté juste avant que le
curseur n'entre sur l'enfant n°1 est : " + e.relatedTarget.id;
}, false);
child2.addEventListener('mouseout', function(e) {
result.innerHTML = "L'élément survolé juste après que le
curseur ait quitté l'enfant n°2 est : " + e.relatedTarget.id;
}, false);
</script>

il y a juste une erreur de syntaxe quand tu veux remplir ton innerHtml

<p id="result"></p>
<div id="parent1">
    Parent N°1<br /> Mouseover sur l'enfant
    <div id="child1">Enfant N°1</div>
</div>
<div id="parent2">
    Parent N°2<br /> Mouseout sur l'enfant
    <div id="child2">Enfant N°2</div>
</div>
<script>
    var child1 = document.getElementById('child1'),
        child2 = document.getElementById('child2'),
        result = document.getElementById('result');
    child1.addEventListener('mouseover', function(e) {
        result.innerHTML = "L'élément quitté juste avant que le curseur n 'entre sur l'enfant n° 1 est: " + e.relatedTarget.id
    }, false);
    child2.addEventListener('mouseout', function(e) {
        result.innerHTML = "L'élément survolé juste après que le curseur ait quitté l 'enfant n°2 est : " + e.relatedTarget.id;
    }, false);
</script>

Utilise Vs Code plutôt que Notepad ++ surtout si tu apprends

Merci