将鼠标悬停在带有 innerHTML 的图像上答案

【问题标题】：mouse over image with innerHTML将鼠标悬停在带有 innerHTML 的图像上
【发布时间】：2015-02-12 00:11:27
【问题描述】：

我需要在鼠标悬停时将图像换出。我相信它也应该使用innerHTML。

<body>

<a href="#">anime</a>
<a href="#">ponies</a>
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony">  <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
 This is for element changes upon mousesing over of the area
 */` 
document.getElementsByClassName("anime")[0].onmouseover=
    function(){
        orangeBorder1();
        mouseAnime();
    }

document.getElementsByClassName("pony")[0].onmouseover=
    function(){
        orangeBorder();
        mousePony();
    }
function mousePony(){
    document.getElementById("pony").src="pony1.png";
}

【问题讨论】：

你没有任何 id 为“pony”的东西，所以它不会抓取任何东西。您应该将 id "pony" 添加到 img 标签，它应该可以工作。

标签： javascript jquery html image mouseover

【解决方案1】：

我不知道你的代码是不是复制错了，但是你没有任何 id 为 pony 的东西

getElementById 将查找具有id 属性的标记，指定它并且您的代码应该可以工作。

id 在页面中应该是唯一的。你也应该给 div 一个 id 而不是查询类名

【讨论】：

带有 ID 小马的 sn-p 是之前尝试使用 ID 更改图像的遗留物。它不起作用，我删除了 ID，但忘记删除脚本中对 ID 的引用。由于一些 CSS 错误和图像链接不正确，它无法正常工作。