Question

我有一个div 100px X 300px。什么是JavaScript中最简单的方法，所以当我将鼠标悬停在div上时，我会显示图像，然后当我离开div时，图像会消失。

对于初学者我认为以下会让我开始，但我似乎无法正确删除图像

    <script type="text/javascript">

        function MouseOver_Event(elementId) {
            var imgToCreate = document.createElement('img');
            imgToCreate.setAttribute('id', 'imgHandle');
            imgToCreate.setAttribute('src', elementId + '.png');
            imgToCreate.setAttribute('onmouseout', 'MouseOut_Event('+elementId+')');
            var targetDiv = document.getElementById(elementId);
            targetDiv.appendChild(imgToCreate);
            targetDiv.removeAttribute('onmouseover', 'MouseOver_Event');
        }
        function MouseOut_Event(elementId) {
            var imgToRemove = document.getElementById('imgHandle');
            var targetDiv = imgToRemove.parentNode();
            if (imgToRemove != null)
                targetDiv.removeChild(imgToRemove);
            targetDiv.setAttribute('onmouseover', 'MouseOut_Event(' + elementId + ')');
        }
    </script>
</head>
<body>
<div id="div1" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div2" onmouseover="MouseOver_Event(this.id)"></div>
<div id="div3" onmouseover="MouseOver_Event(this.id)"><img src="Div3.png" alt="test" onmouseout="MouseOut_Event(parentNode's id or something)" /></div>
</body>

Answer 1

您将MouseOut_Event附加到onmouseover而不是onmouseout。但无论如何，你可能不需要搞乱动态事件的创建;只需将onmouseout =“MouseOut_Event（this.id）”添加到三个div中就应该这样做。

Answer 2

为什么不使用 CSS ？例如：

#div1{background:none;}
#div1:hover{background:url('src/div1.png') no-repeat;}

div内的javascript图像翻转

2 个答案: