使用jQuery实现鼠标悬停按钮时切换图片

别担心，作为jQuery新手遇到这种情况太正常啦！我来帮你排查问题并给出可行的解决方案～

可能的问题点 #

你的代码逻辑本身没问题，但大概率是以下某个细节没做好：

• 没有在DOM加载完成后再绑定事件，导致选择器找不到目标元素
• 要切换的图片（#pic2）初始状态没有隐藏，所以hover时看不出变化
• 忘记引入jQuery库，导致代码根本无法执行

修正后的完整实现代码 #

先看HTML结构示例：

<!-- 引入jQuery库（确保放在你的脚本之前，可使用本地下载的库文件） -->
<script src="jquery.min.js"></script>

<button id="green-btn">悬停我切换图片</button>
<!-- 默认显示的图片 -->
<img id="pic1" src="默认图片地址" alt="默认图">
<!-- 默认隐藏需要切换的图片 -->
<img id="pic2" src="悬停显示的图片地址" alt="悬停图" style="display: none;">

然后是jQuery代码，一定要放在$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
  // 绑定hover事件
  $("#green-btn").hover(
    // 鼠标移入时：隐藏默认图，显示悬停图
    function() {
      $("#pic1").hide();
      $("#pic2").show();
    },
    // 鼠标移出时：显示默认图，隐藏悬停图
    function() {
      $("#pic1").show();
      $("#pic2").hide();
    }
  );
});

关键细节说明 #

• DOM加载时机：$(document).ready()会等到页面所有DOM元素加载完成后再执行内部代码，避免出现选择器找不到元素的情况
• 初始状态设置：给#pic2加上display: none;，让它默认不显示，这样hover时的切换效果才明显
• 简化需求版：如果你只需要hover时显示#pic2、移出时隐藏，代码可以更简单：

$(document).ready(function() {
  $("#green-btn").hover(
    function() {
      $("#pic2").show();
    },
    function() {
      $("#pic2").hide();
    }
  );
});

这种情况下同样要确保#pic2初始是隐藏状态哦～

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