在前端页面开发中，实现鼠标悬停图片时动态改变Div背景是很常见的交互需求，不需要引入额外的库，使用原生JavaScript就能轻松完成。下面我们就一步步讲解具体的实现方法。
实现原理
整个效果的实现依赖三个核心步骤：首先获取页面中的目标图片元素和需要修改背景的Div元素，然后给图片元素绑定mouseover（鼠标悬停）和mouseout（鼠标移出）两个事件，最后在对应的事件处理函数中修改Div元素的背景样式属性即可。
基础实现代码
首先准备基础的HTML结构，包含一个图片和一个需要修改背景的Div：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬停图片改Div背景</title>
<style>
.target-div {
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin-top: 20px;
transition: background 0.3s ease; /* 添加过渡效果让背景变化更平滑 */
}
.hover-img {
width: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="https://ipipp.com/default-img.jpg" alt="示例图片" class="hover-img" id="hoverImg">
<div class="target-div" id="targetDiv">我是需要修改背景的Div</div>
</body>
</html>接下来添加JavaScript逻辑，实现悬停时修改背景的效果：
// 获取图片元素和Div元素
const hoverImg = document.getElementById('hoverImg');
const targetDiv = document.getElementById('targetDiv');
// 定义悬停时要设置的背景值，可以是颜色、图片地址等
const hoverBg = '#f0f8ff'; // 浅蓝色背景
const defaultBg = ''; // 默认背景，为空则恢复初始样式
// 绑定鼠标悬停事件
hoverImg.addEventListener('mouseover', function() {
// 修改Div的背景样式
targetDiv.style.backgroundColor = hoverBg;
// 如果需要设置背景图片，可以取消下面这行的注释，替换成对应的图片地址
// targetDiv.style.backgroundImage = 'url(https://ipipp.com/hover-bg.jpg)';
});
// 绑定鼠标移出事件
hoverImg.addEventListener('mouseout', function() {
// 恢复Div的默认背景
targetDiv.style.backgroundColor = defaultBg;
// 如果之前设置了背景图片，移出时也需要清空
// targetDiv.style.backgroundImage = '';
});注意事项
- 如果页面中有多个图片需要对应修改不同的Div背景，可以通过循环遍历元素，给每个图片绑定对应的事件，避免重复写大量重复代码。
- 修改背景时如果需要设置背景图片，要注意图片地址的正确性，同时可以通过
backgroundSize等属性调整背景图片的显示效果，比如设置targetDiv.style.backgroundSize = 'cover'让图片覆盖整个Div。 - 如果Div本身有默认的背景样式，移出时恢复默认背景的方式可以根据实际情况调整，比如记录初始背景值再恢复，而不是直接设为空字符串。
拓展用法
除了修改背景颜色，还可以在悬停时同时修改Div的其他样式，比如文字颜色、边框样式等，只需要在事件处理函数中添加对应的样式修改语句即可。例如悬停时同时修改文字颜色：
hoverImg.addEventListener('mouseover', function() {
targetDiv.style.backgroundColor = hoverBg;
targetDiv.style.color = '#ff6600'; // 修改文字颜色为橙色
});
hoverImg.addEventListener('mouseout', function() {
targetDiv.style.backgroundColor = defaultBg;
targetDiv.style.color = ''; // 恢复默认文字颜色
});
JavaScript鼠标悬停事件Div背景修改事件监听修改时间：2026-06-06 05:25:09