如何修复将鼠标悬停在子元素上时调用的鼠标输出

我有一个div，当调用onmouseover时，我正在添加另一个div。问题是当我尝试将鼠标悬停在子div 上时，它会调用 onmouseout 并关闭div。如何修复它，使其不会关闭div？不使用 JQuery。

这些是我的代码：

function ShowSong(i) {
        var wordsdiv = document.getElementById("words" + i);
        var songdiv = document.getElementById("song1");
        switch (i) {
            case 1:
                if (wordsdiv == null) {
                    var words = "שב ילדי שב אל תלך עכשיו<br />" +
                                "תן לנשום אותך עוד רגע עוד קצת.<br />" +
                                "שב ילדי שב כי עכשיו נחמד.<br />" +
                                "יש שקט ואני איתך לבד.<br /><br />" +
                                "וכשתלך, תזכור תמיד<br />" +
                                "לשמור על עצמך,<br />" +
                                "מאנשים קשים<br />" +
                                "אשר עומדים במסלולך.<br />" +
                                "אל תפחד, מעל ראשך יש מלאכים<br />" +
                                "ואתה תמיד תהיה..<br /><br />" +
                                "גיבור של אימא<br />" +
                                "אתה תמיד תהיה לי מלך העולם,<br />" +
                                "תמיד עם החיוך הכי מושלם,<br />" +
                                "כמו בתמונות בזיכרונות<br />" +
                                "לכל מקום שלא תלך, תהיה של אימא…<br /><br />" +
                                "לך ילדי, לך, תיזהר מעט.<br />" +
                                "קח את בירכתי, את תפילתי, איתך.<br />" +
                                "אל תשכח בני, אימא כאן בשבילך,<br />" +
                                "אז לך תגשים את כל חלומותיך.<br /><br />" +
                                "וכשתלך, תזכור תמיד<br />" +
                                "לשמור על עצמך,<br />" +
                                "מאנשים קשים<br />" +
                                "אשר עומדים במסלולך.<br />" +
                                "אל תפחד, מעל ראשך יש מלאכים<br />" +
                                "ואתה תמיד תהיה..<br />";
                    songdiv.innerHTML += "<div id='words1' class='wordsbg' onmouseover='ShowSong(1);'><p class='words'>" + words + "</p></div>";
                }
                break;
            case 2:
                var wordsdiv = document.getElementById("words2");
                if (wordsdiv == null) {
                    var songdiv = document.getElementById("song2");
                    var words = "";
                    songdiv.innerHTML += "<div id='words2' class='wordsbg' onmouseover='ShowSong(2);'><p class='words'>" + words + "</p></div>";
                }
                break;
        }
    }
    function DeleteSong(i) {
        switch (i) {
            case 1:
                var wordsdiv = document.getElementById("words1");
                if (wordsdiv != null)
                    wordsdiv.parentNode.removeChild(wordsdiv);
                break;
            case 2:
                var wordsdiv = document.getElementById("words2");
                if (wordsdiv != null)
                    wordsdiv.parentNode.removeChild(wordsdiv);
                break;
        }
    }
</script>
<div id="song1" class="song" onmouseover="ShowSong(1);" onmouseout="DeleteSong(1);">
<p class="title" onmouseover="ShowSong(1);">גיבור של אמא<br />
<small class="writer" onmouseover="ShowSong(1);">משה פרץ</small></p>
</div>
<div id="song2" class="song" onmouseover="ShowSong(2);" onmouseout="DeleteSong(2);">
<p class="title">כותרת השיר<br />
<small class="writer">זמר</small></p>
</div>