在前端页面开发中，鼠标悬停触发样式变化是提升用户体验的常用交互手段，其中鼠标悬停图片时动态改变div背景的需求十分常见，实现过程并不复杂，只需要结合HTML、CSS和JavaScript即可完成。
实现原理说明
整个效果的实现逻辑分为三个部分：首先需要准备基础的页面结构，包含触发事件的图片元素和目标div元素；其次通过CSS设置初始的样式，包括div的默认背景、图片和div的基础布局；最后通过JavaScript监听图片的鼠标悬停事件，在事件触发时修改目标div的背景样式，鼠标移出时恢复默认样式。
基础结构搭建
HTML结构
首先搭建基础的页面HTML结构，定义触发事件的图片和需要修改背景的div元素，代码如下：
<div class="container">
<!-- 触发事件的图片列表 -->
<div class="img-list">
<img src="https://ipipp.com/default1.jpg" alt="示例图片1" class="hover-img" data-bg="https://ipipp.com/bg1.jpg">
<img src="https://ipipp.com/default2.jpg" alt="示例图片2" class="hover-img" data-bg="https://ipipp.com/bg2.jpg">
<img src="https://ipipp.com/default3.jpg" alt="示例图片3" class="hover-img" data-bg="https://ipipp.com/bg3.jpg">
</div>
<!-- 需要修改背景的div -->
<div class="target-div">
这里是背景会被动态修改的div区域
</div>
</div>CSS样式
设置基础的CSS样式，定义div和图片的布局，以及目标div的默认背景，代码如下：
.container {
width: 800px;
margin: 20px auto;
}
.img-list {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.hover-img {
width: 150px;
height: 100px;
cursor: pointer;
border: 2px solid #eee;
border-radius: 4px;
}
.target-div {
width: 100%;
height: 300px;
border: 1px solid #ddd;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #666;
/* 默认背景 */
background: url(https://ipipp.com/default_bg.jpg) no-repeat center/cover;
}JavaScript事件绑定实现
核心的JavaScript逻辑是监听图片的mouseenter和mouseleave事件，在鼠标悬停时获取图片上存储的背景地址，修改目标div的背景，移出时恢复默认背景。
首先获取所有需要监听的图片元素和目标div元素：
// 获取所有触发事件的图片元素
const hoverImgs = document.querySelectorAll('.hover-img');
// 获取需要修改背景的目标div
const targetDiv = document.querySelector('.target-div');
// 存储默认背景地址，用于鼠标移出时恢复
const defaultBg = 'https://ipipp.com/default_bg.jpg';然后遍历所有图片元素，绑定对应的事件处理函数：
// 遍历所有图片绑定事件
hoverImgs.forEach(img => {
// 鼠标悬停事件
img.addEventListener('mouseenter', function() {
// 从图片的data-bg属性获取背景地址
const bgUrl = this.getAttribute('data-bg');
// 修改目标div的背景
targetDiv.style.background = `url(${bgUrl}) no-repeat center/cover`;
});
// 鼠标移出事件
img.addEventListener('mouseleave', function() {
// 恢复默认背景
targetDiv.style.background = `url(${defaultBg}) no-repeat center/cover`;
});
});效果优化说明
上述代码已经可以实现基础的效果，还可以根据实际需求做进一步优化：
- 可以给背景切换添加过渡动画，只需要在
.target-div的CSS中添加transition: background 0.3s ease;即可实现平滑切换效果。 - 如果图片数量较多，可以考虑事件委托的方式绑定事件，减少事件监听器的数量，提升性能。
- 可以添加加载状态判断，确保背景图片加载完成后再进行切换，避免出现空白的情况。
完整运行示例
将上面的HTML、CSS、JavaScript代码整合到一个文件中，即可直接运行查看效果：
<!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>
.container {
width: 800px;
margin: 20px auto;
}
.img-list {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.hover-img {
width: 150px;
height: 100px;
cursor: pointer;
border: 2px solid #eee;
border-radius: 4px;
}
.target-div {
width: 100%;
height: 300px;
border: 1px solid #ddd;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #666;
background: url(https://ipipp.com/default_bg.jpg) no-repeat center/cover;
transition: background 0.3s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="img-list">
<img src="https://ipipp.com/default1.jpg" alt="示例图片1" class="hover-img" data-bg="https://ipipp.com/bg1.jpg">
<img src="https://ipipp.com/default2.jpg" alt="示例图片2" class="hover-img" data-bg="https://ipipp.com/bg2.jpg">
<img src="https://ipipp.com/default3.jpg" alt="示例图片3" class="hover-img" data-bg="https://ipipp.com/bg3.jpg">
</div>
<div class="target-div">
这里是背景会被动态修改的div区域
</div>
</div>
<script>
const hoverImgs = document.querySelectorAll('.hover-img');
const targetDiv = document.querySelector('.target-div');
const defaultBg = 'https://ipipp.com/default_bg.jpg';
hoverImgs.forEach(img => {
img.addEventListener('mouseenter', function() {
const bgUrl = this.getAttribute('data-bg');
targetDiv.style.background = `url(${bgUrl}) no-repeat center/cover`;
});
img.addEventListener('mouseleave', function() {
targetDiv.style.background = `url(${defaultBg}) no-repeat center/cover`;
});
});
</script>
</body>
</html>
JavaScript鼠标悬停事件div背景修改事件监听修改时间：2026-06-05 16:59:28