자식 요소 위에 마우스를 올려 놓을 때 호출되는 onmouseout을 수정하는 방법은 무엇입니까?

Question

onmouseover가 호출 될 때 다른 div를 추가하는 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> 

Answer 1

대신 자바 스크립트를 사용하여 단어를 추가, 당신은 HTML에 넣어, 숨길/CSS 사용하여 표시 할 수 있습니다 :

.song div { 
    display: none; 
} 

.song:hover div { 
    display: block; 
} 

Fiddle을