Javascript 更改鼠标 hover 上的图像不起作用

Question

I have an html code as shown below. So far it is able to display the intended image. I also tried to change the src attribute and works completely fine.

<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>

Now I have this script tag at the bottom of my element. It is supposed to change the image of the above html code from png to gif upon mouse hover on the specified article id. Last time I used this code was about 3 months ago, and it doesn't seem to work now.

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

I'm a javascript noob. Anybody could help me solve the png-to-gif-change-on-mouse-hover issue? Would be greatly appreciated.

Answer 1

You have 2 elements using the same id . The id should be unique per document. jQuery is matching the first id so setting the src attribute on the div doesn't have any impact.

Remove the id from the article as follow

<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>