如何实现鼠标悬停图片时动态改变Div的背景

在前端页面交互开发中，实现鼠标悬停图片元素时动态改变Div背景的效果非常常见，这种交互可以提升页面的趣味性和用户操作反馈感，下面我们就一步步讲解具体的实现方法。

实现核心思路

整体的实现逻辑分为三个步骤：首先需要获取到页面中的目标图片元素和需要修改背景的Div元素，然后给图片元素绑定鼠标悬停相关的事件，最后在事件触发时修改Div元素的背景样式。这里我们用到的核心API包括document.querySelector获取元素、addEventListener绑定事件，以及修改元素的style.background属性。

基础示例实现

首先我们先准备基础的HTML结构，包含一个作为悬停目标的图片元素，和一个需要被修改背景的Div元素：

<!-- 悬停目标的图片元素 -->
<img id="targetImg" src="https://ipipp.com/demo-img.jpg" alt="悬停示例图片" width="200">
<!-- 需要修改背景的Div元素 -->
<div id="bgDiv" style="width: 300px; height: 300px; border: 1px solid #ccc;">
    这里是背景会被修改的Div区域
</div>

接下来我们编写JavaScript代码，实现悬停时的背景修改逻辑：

// 获取目标图片元素
const targetImg = document.querySelector('#targetImg');
// 获取需要修改背景的Div元素
const bgDiv = document.querySelector('#bgDiv');

// 给图片绑定鼠标悬停进入事件
targetImg.addEventListener('mouseover', function() {
    // 修改Div的背景为红色
    bgDiv.style.background = '#ff0000';
});

// 给图片绑定鼠标悬停离开事件
targetImg.addEventListener('mouseout', function() {
    // 鼠标离开时恢复Div的背景为白色
    bgDiv.style.background = '#ffffff';
});

进阶功能扩展

在实际开发中，我们可能需要根据悬停的不同图片切换不同的背景，比如悬停不同图片时Div显示不同的颜色或者背景图片，我们可以通过在图片上自定义属性来存储对应的背景值，实现更灵活的效果：

<img class="hover-img" src="https://ipipp.com/img1.jpg" data-bg-color="#ff0000" alt="图片1" width="200">
<img class="hover-img" src="https://ipipp.com/img2.jpg" data-bg-color="#00ff00" alt="图片2" width="200">
<img class="hover-img" src="https://ipipp.com/img3.jpg" data-bg-color="#0000ff" alt="图片3" width="200">
<div id="dynamicBgDiv" style="width: 300px; height: 300px; border: 1px solid #ccc; margin-top: 20px;">
    动态切换背景的Div区域
</div>

对应的JavaScript代码如下：

// 获取所有悬停图片元素
const hoverImgs = document.querySelectorAll('.hover-img');
// 获取动态背景Div
const dynamicBgDiv = document.querySelector('#dynamicBgDiv');

// 遍历所有图片元素绑定事件
hoverImgs.forEach(img => {
    // 鼠标进入时设置对应的背景颜色
    img.addEventListener('mouseover', function() {
        // 从自定义属性中获取背景颜色
        const bgColor = this.getAttribute('data-bg-color');
        dynamicBgDiv.style.background = bgColor;
    });

    // 鼠标离开时恢复默认背景
    img.addEventListener('mouseout', function() {
        dynamicBgDiv.style.background = '#ffffff';
    });
});

注意事项

• 获取元素时要确保DOM已经加载完成，最好把JavaScript代码放在页面底部，或者使用DOMContentLoaded事件包裹代码。
• 如果修改的是背景图片，需要设置背景图片的路径，同时可以搭配background-size等属性调整背景显示效果，例如bgDiv.style.background = 'url(图片路径) no-repeat center/cover'。
• 事件绑定时要注意事件类型，mouseover是鼠标进入元素触发，mouseout是鼠标离开元素触发，也可以使用mouseenter和mouseleave，二者的区别在于是否冒泡，常规场景下使用差异不大。

JavaScript鼠标悬停事件Div背景修改addEventListener修改时间：2026-06-05 18:21:11