img元素绑定mouseover事件不触发的原因及解决方法

问题参考代码 #

你提供的HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body onload="load();">
    <img src="img1.png">
    <img src="img2.png">
    <img class="img3" src="img3.png">
  </body>
</html>

对应JS交互代码如下，预期效果是鼠标移入设置了position: absolute的第三张图片时，图片向左移动：

let img;
function load(){
  img = document.querySelector(".img3");
  img.addEventListener("mouseover", mouseover);
}
function mouseover(){
  img.style.left = "0px";
}

实际运行时mouseover回调完全不触发。

故障原因 #

两个核心问题会导致该现象：

• 语法错误：你贴出的JS代码中，document.querySelector(".img3")、addEventListener("mouseover"两处的右引号是中文全角双引号，会直接触发JS解析错误，load函数执行中断，事件根本没有绑定到元素上。
• 元素遮挡：设置了position: absolute的第三张图片如果没有显式指定初始left/top定位值和z-index层级，会被普通文档流中排在前面的两张图片覆盖，鼠标事件实际被上层的图片捕获，无法触发目标元素的mouseover事件。

修复步骤 #

1. 修正JS语法错误，所有字符串统一使用英文半角引号，确保代码可以正常解析执行。
2. 给第三张图片补充必要的CSS样式，明确它的定位和层级：

.img3 {
  position: absolute;
  /* 设置初始位置，和移动目标值形成位移差，可根据实际需求调整数值 */
  left: 200px;
  top: 10px;
  /* 提高层级，避免被其他元素遮挡 */
  z-index: 10;
  /* 可选：添加过渡实现平滑移动效果 */
  transition: left 0.2s ease;
}

3. （可选优化）如果需要实现鼠标移出后图片回到原位，可以补充mouseout事件监听：

function mouseout(){
  img.style.left = "200px";
}
// 在load函数中补充绑定
img.addEventListener("mouseout", mouseout);

修复后打开浏览器控制台确认无JS报错，鼠标移入第三张图片即可正常触发位移动画。

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