如何在鼠标悬停div-12时切换img的src属性？

嘿，这个需求挺常见的，我给你整理了几种实用的实现方式，你可以根据自己的技术栈来挑：

方法一：原生JavaScript实现（无依赖，通用） #

先确保你的HTML结构大概是这样的：

<div id="div-12">鼠标悬停这里</div>
<img id="target-img" src="初始图片地址.jpg" alt="图片描述">

然后写一段原生JS代码就能搞定：

// 获取目标元素
const hoverDiv = document.getElementById('div-12');
const targetImg = document.getElementById('target-img');

// 先保存初始图片地址，方便鼠标离开时恢复
const originalSrc = targetImg.src;

// 监听鼠标进入事件，切换图片
hoverDiv.addEventListener('mouseover', () => {
  targetImg.src = '悬停时的图片地址.jpg';
});

// 监听鼠标离开事件，恢复原图片
hoverDiv.addEventListener('mouseout', () => {
  targetImg.src = originalSrc;
});

这样用户悬停在div上时图片切换，离开后自动恢复，体验更完整。

方法二：jQuery实现（如果你项目已经在用jQuery） #

如果你的项目里引入了jQuery，代码会更简洁：

<div id="div-12">鼠标悬停这里</div>
<img id="target-img" src="初始图片地址.jpg" alt="图片描述">

<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
  const originalSrc = $('#target-img').attr('src');
  
  // jQuery的hover方法直接绑定进入和离开的动作
  $('#div-12').hover(
    function() {
      $('#target-img').attr('src', '悬停时的图片地址.jpg');
    },
    function() {
      $('#target-img').attr('src', originalSrc);
    }
  );
});
</script>

方法三：纯CSS实现（无需脚本，适合特定场景） #

如果不想写JS，也可以用CSS的方式实现，但需要调整一下HTML结构，用两张图片切换显示：

<div id="div-12">
  鼠标悬停这里
  <img class="default-img" src="初始图片.jpg" alt="图片描述">
  <img class="hover-img" src="悬停图片.jpg" alt="图片描述">
</div>

然后添加CSS样式：

/* 默认隐藏悬停状态的图片 */
#div-12 .hover-img {
  display: none;
}

/* 悬停时隐藏默认图，显示悬停图 */
#div-12:hover .default-img {
  display: none;
}
#div-12:hover .hover-img {
  display: block;
}

注意：这种方式需要提前加载两张图片，适合图片体积较小的场景，避免切换时出现加载延迟。

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