鼠标悬停时的Javascript更改图像不起作用

Question

我有一个html代码，如下所示。到目前为止，它能够显示预期的图像。我还尝试更改src属性，并且工作得非常好。

<article id="memory-game">
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
<a href="#" class="special2" style="color: rgba(125, 125, 125, 1);">Confidential Source Code</a>
</article>

现在，我在元素的底部有了这个script标记。它应该在鼠标悬停在指定的文章id上时，将上述html代码的图像从png更改为gif。我上次使用此代码是在大约3个月前，现在似乎不起作用。

<script>
$(function() {
$("#memory-game").hover(
function() {$(this).attr("src", "../../images/memory-game.gif");},
function() {$(this).attr("src", "../../images/memory-game.png");}
);
});
</script>

我是一个javascript noob。有人可以帮我解决鼠标悬停时png到gif的更改问题吗？非常感谢。

Answer 1

您有两个元素使用相同的id。id在每个文档中应该是唯一的。jQuery正在匹配第一个id，因此在div上设置src属性不会产生任何影响。

按照从文章中删除id

<article>
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
<a href="#" class="special2" style="color: rgba(125, 125, 125, 1);">Confidential Source Code</a>
</article>