使用 JavaScript 实现鼠标悬停图片时动态改变 Div 背景-html教程-PHP中文网

使用 JavaScript 实现鼠标悬停图片时动态改变 Div 背景

霞舞

发布： 2025-10-14 12:24:43

原创

436人浏览过

使用 javascript 实现鼠标悬停图片时动态改变 div 背景

本文将介绍如何使用 JavaScript 实现当鼠标悬停在不同的图片元素上时，动态改变一个 div 元素的背景图片。通过监听 `mouseover` 事件并获取当前悬停图片的 `src` 属性，我们可以轻松地更新 div 的背景样式，从而实现交互式的用户体验。

实现原理

核心思路是利用 JavaScript 的事件监听机制，监听图片元素的 mouseover (鼠标悬停) 和 mouseout (鼠标移出) 事件。当 mouseover 事件触发时，获取当前图片的 src 属性，并将其设置为目标 div 元素的 backgroundImage 样式。当 mouseout 事件触发时，可以恢复 div 元素的原始背景或者设置为其他默认背景。

HTML 结构

首先，我们需要定义一个 div 元素，用于显示背景图片，以及多个 img 元素，用户可以通过悬停这些图片来改变 div 的背景。

<div id="image">
    Hover over an image below to display here.
</div>

<img class="preview" alt="" src="bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" alt="" src="bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

登录后复制

在上面的代码中，我们为每个 img 元素添加了 onmouseover 和 onmouseout 属性，分别绑定了 upDate(this) 和 unDo() JavaScript 函数。 this 关键字会将当前 img 元素作为参数传递给 upDate 函数。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现背景图片的动态更新。

图改改

在线修改图片文字

455

查看详情

function upDate(previewPic){
    document.getElementById("image").style.backgroundImage = `url('${previewPic.src}')`;
}

function unDo() {
    document.getElementById("image").style.backgroundImage = "none"; // 移除背景图片
    document.getElementById("image").innerHTML = "Hover over an image below to display here."; // 恢复默认文字
}

登录后复制

upDate 函数接收一个 previewPic 参数，该参数代表当前鼠标悬停的 img 元素。我们使用 previewPic.src 获取图片的 URL，并将其设置为 id 为 "image" 的 div 元素的 backgroundImage 样式。使用模板字符串（template literals）可以更方便地构建 URL 字符串。

unDo 函数用于处理鼠标移出图片的情况。在这里，我们将 div 的 backgroundImage 设置为 "none"，从而移除背景图片，并将 div 里面的文字恢复为初始状态。

完整代码示例

将 HTML 和 JavaScript 代码整合在一起，得到完整的示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Background Change</title>
<style>
#image {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    text-align: center;
    line-height: 200px;
}

.preview {
    width: 100px;
    height: 80px;
    margin: 5px;
    cursor: pointer;
}
</style>
</head>
<body>

<div id="image">
    Hover over an image below to display here.
</div>

<img class="preview" alt="" src="bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" alt="" src="bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview" src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<script>
function upDate(previewPic){
    document.getElementById("image").style.backgroundImage = `url('${previewPic.src}')`;
    document.getElementById("image").innerHTML = ""; // 移除默认文字
}

function unDo() {
    document.getElementById("image").style.backgroundImage = "none"; // 移除背景图片
    document.getElementById("image").innerHTML = "Hover over an image below to display here."; // 恢复默认文字
}
</script>

</body>
</html>

登录后复制

注意事项

图片路径： 确保图片路径正确，否则背景图片可能无法显示。
CSS 样式： 可以通过 CSS 样式来调整 div 元素的背景图片显示方式，例如 background-size、background-repeat 等。
性能优化： 如果图片数量很多，可以考虑使用事件委托来提高性能。
用户体验： 可以添加过渡效果，使背景图片的切换更加平滑。