Javascript change image on mouse hover not working

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.

How do I ask a good question?: "Describe the problem. "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it. Use a brief but descriptive summary of your problem as the title of your question." — Andreas
– Andreas, Commented Aug 9, 2022 at 8:29
you set it to the gif and then immediately back to the png. why is that? — Matt Ellen
– Matt Ellen, Commented Aug 9, 2022 at 8:45
@MattEllen because it is supposed to return back to a png image on mouse leave from the element. I was using this same code 3 months ago and it was still working. Now, I tried to comment out the last function to avoid reverting back to png, but still the gif is not being displayed on mouse hover. — Jobo Fernandez
– Jobo Fernandez, Commented Aug 9, 2022 at 8:54

Ahmad Alfy · Accepted Answer · 2022-08-09 08:52:33Z

2

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>

answered Aug 9, 2022 at 8:52

Ahmad Alfy

13.4k6 gold badges70 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript change image on mouse hover not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related