鼠标悬停切换图片功能失效求助（JavaScript+jQuery）

核心问题 #

1. ID重复冲突：HTML里<article>和<img>共用了memory-game作为ID，而ID在页面中必须唯一，这会导致选择器匹配逻辑混乱。
2. 元素选择错误：你的脚本选中的是<article>元素，尝试给它设置src属性，但src是图片元素专属属性，<article>根本不支持这个属性，所以完全无效。

修复步骤 #

1. 修改HTML，确保ID唯一

把<img>的ID改成不重复的名称，比如memory-game-img：

<article id="memory-game">
    <a class="image"><img src="../../images/memory-game.png" id="memory-game-img" 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>

2. 修正JavaScript脚本

监听<article>的hover事件，然后定位到内部的<img>元素修改src：

$(function() {
    $("#memory-game").hover(
        function() {
            // 鼠标进入时，替换为gif图
            $(this).find("#memory-game-img").attr("src", "../../images/memory-game.gif");
        },
        function() {
            // 鼠标离开时，切回png图
            $(this).find("#memory-game-img").attr("src", "../../images/memory-game.png");
        }
    );
});

额外优化（可选） #

如果不想依赖ID，也可以用层级选择器定位图片，后续修改元素ID时脚本无需调整：

$(function() {
    $("#memory-game").hover(
        function() {
            $(this).find(".image img").attr("src", "../../images/memory-game.gif");
        },
        function() {
            $(this).find(".image img").attr("src", "../../images/memory-game.png");
        }
    );
});

内容的提问来源于stack exchange，提问作者Jobo Fernandez