gpt4 book ai didi

div 内的 javascript 图像翻转

转载 作者:行者123 更新时间:2023-11-30 13:28:26 25 4
gpt4 key购买 nike

我有一个 100px X 300px 的 div。 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>

最佳答案

您将 MouseOut_Event 附加到 onmouseover 而不是 onmouseout。但是您可能不需要弄乱动态事件的创建;只需将 onmouseout="MouseOut_Event(this.id)"添加到三个 div 即可。

关于div 内的 javascript 图像翻转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7669885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com