JQuery实现鼠标悬停切换img src本地打开失效问题求助

开发者阿泽

2026-5-15

解决本地打开文件时JQuery悬停切换图片失效的问题

嘿，这个问题我太熟悉啦！核心原因其实是图片路径的写法问题，咱们一步步来解决：

问题根源：绝对路径 vs 相对路径

你用的/images/img1.gif是绝对路径，在Brackets的Chrome实时预览模式下，它模拟了服务器环境，根目录就是你的项目文件夹，所以这个路径能正确找到图片。但当你直接双击本地HTML文件打开时，浏览器用的是file://协议，这时候开头的/会指向你的系统根目录（比如Windows的C:/），自然找不到你项目里的图片文件！

修正方案

1. 改用相对路径

把路径开头的斜杠去掉，用相对路径指向图片：

$("#logo-img").hover(
  function() {
    // 用相对路径，指向项目根下的images文件夹
    $(this).attr("src", "images/img1.gif");
  },
  function() {
    $(this).attr("src", "images/img2.gif");
  }
);

也可以用./images/img1.gif，./表示当前HTML文件所在的目录，路径指向更明确。

2. 优化代码（可选但推荐）

用$(this)代替重复选择器$("#logo-img")，不仅代码更简洁，执行效率也更高——不需要重复查找DOM元素。

3. 确保JQuery正确加载且代码在DOM就绪后执行

别忘了把JQuery的引入放在自定义JS代码之前，并且最好把代码包裹在$(document).ready()里，确保DOM加载完成后再执行：

<!-- 先引入JQuery -->
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#logo-img").hover(
    function() {
      $(this).attr("src", "images/img1.gif");
    },
    function() {
      $(this).attr("src", "images/img2.gif");
    }
  );
});
</script>