鼠标悬浮（hover）切换图片功能失效求助（附代码）

首先瞅一眼你的代码，核心问题是语法错误直接让整个脚本跑不起来——$(document).ready的结尾你写成了)}，正确的写法应该是});，少了个大括号，浏览器直接解析失败，自然功能没用啦。

另外，咱们可以用jQuery自带的hover()方法来简化代码，把mouseover和mouseout的逻辑整合到一起，看起来更清爽。

给你修正后的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".card .image-container").hover(
    // 鼠标悬浮时切换到hover状态的图片
    function () {
      $(this).attr('src', $(this).data("hover"));
    },
    // 鼠标离开时切回原始图片
    function () {
      $(this).attr('src', $(this).data("src"));
    }
  );
}); // 这里是正确的闭合写法，之前错写成了`)}`
</script>

<div class="card col-xs-2" style="margin-top:33%;padding:0 2% 2% 2%">
  <img 
    src="img/2013-1.png" 
    data-src="img/2013-1.png" 
    data-hover="img/2013-2.png" 
    class="image-container" 
    alt="" 
    style="max-width: 100%;max-height: 100%;width: 100%;height: 100%" 
  />
</div>

额外注意点： #

• 检查图片路径：确保img/2013-1.png和img/2013-2.png的路径是对的，如果路径错了，浏览器控制台会报404错误，这时候图片也切换不了。
• 确认jQuery加载：虽然你引入了CDN的jQuery，但如果网络问题导致加载失败，脚本也会失效，可以在浏览器开发者工具的“网络”标签里检查jQuery是否加载成功。

内容的提问来源于stack exchange，提问作者pawan shaw