How to fix onmouseout called when hovering over child elements?

Question

I have a div that I'm adding another div to when onmouseover is called. Problem is when I try to hover over the child div, it'll call onmouseout and close the div. How do I fix it so it won't close the div? Not using JQuery.

These are my codes:

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>

Answer 1

Instead of adding the words using JavaScript, you could put them in the HTML, and hide/display them using CSS:

.song div {
  display: none;
}

.song:hover div {
  display: block;
}

Fiddle