带有 appendChild 的 img答案

【问题标题】：img with appendChild带有 appendChild 的 img
【发布时间】：2012-06-09 11:17:03
【问题描述】：

如果我用span 包围img 标签并将mouseover 放在span 中，它可以工作。如果我没有span，而只是将mouseover 放在img 中，则没有（请参阅正文中的单行html）。

我不能直接将孩子附加到图像上吗？

<html>
<script type="text/javascript">
function showMsg(obj) {
   var spn;
   spn = document.createElement('span');
   spn.innerHTML = "test message";
   obj.appendChild(spn);
   obj.onmouseout = function() {obj.removeChild(spn)};
 }
</script>

<body>
  <img onmouseover="showMsg(this)" src="http://www.w3schools.com/jsref/smiley.gif">
<!--
  <span onmouseover="showMsg(this)"><img src="http://www.w3schools.com/jsref/smiley.gif"></span>
-->
</body>
</html>

【问题讨论】：

见stackoverflow.com/a/10425398/32746

标签： image mouseover html appendchild

【解决方案1】：

不，<img> 是一个空元素。

【讨论】：

【解决方案2】：

但是，您可以做的是使用透明的 div 覆盖 image 并将其附加到该位置。

【讨论】：