Question

我有一个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>

Answer 1

您可以将它们放在HTML中，然后使用CSS隐藏/显示它们，而不是使用JavaScript添加单词：

.song div {
  display: none;
}

.song:hover div {
  display: block;
}

<强> Fiddle

如何在悬停在子元素上时修复onmouseout？

1 个答案: