使用 JavaScript 根据鼠标悬停的图像元素动态改变 div 背景-html教程-PHP中文网

使用 JavaScript 根据鼠标悬停的图像元素动态改变 div 背景

霞舞

发布： 2025-10-14 11:36:51

原创

446人浏览过

使用 javascript 根据鼠标悬停的图像元素动态改变 div 背景

本教程旨在指导开发者如何使用 JavaScript 实现当鼠标悬停在不同的图像元素上时，动态改变一个 div 元素的背景图片。通过监听 `mouseover` 事件，获取当前悬停图像的 `src` 属性，并将其设置为目标 div 的背景图片，从而实现视觉上的动态切换效果。

实现原理

核心思路是利用 JavaScript 监听图像元素的 mouseover 事件。当鼠标悬停在图像上时，触发相应的事件处理函数。该函数获取当前悬停图像的 src 属性，并将其赋值给目标 div 元素的 backgroundImage 样式属性。

HTML 结构

首先，我们需要一个用于显示背景图片的 div 元素，以及多个作为预览图的 img 元素。

<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()">

登录后复制

注意：

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

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

id="image": 用于标识目标 div 元素，方便 JavaScript 操作。
class="preview": 可以用于统一设置预览图的样式（可选）。
src="...": 指定预览图的图片路径。
onmouseover="upDate(this)": 关键属性，当鼠标悬停在该图像上时，调用 upDate() 函数，并将当前图像元素（this）作为参数传递给该函数。
onmouseout="unDo()": 当鼠标移出图像时，调用 unDo() 函数，用于恢复默认背景。

JavaScript 代码

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

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) 函数：
- 接收一个 previewPic 参数，该参数为当前鼠标悬停的图像元素。
- document.getElementById("image"): 获取 id 为 "image" 的 div 元素。
- style.backgroundImage = \url('${previewPic.src}')`: 将 div 元素的backgroundImage样式属性设置为当前悬停图像的src` 属性值。这里使用了模板字符串（template literals）来动态构建 URL。
unDo() 函数：
- 当鼠标移出图像时，将 backgroundImage 设置为 "none"，移除背景图片。
- 恢复 div 中的默认文字提示。

完整示例

将 HTML 和 JavaScript 代码整合在一起，就是一个完整的示例。

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Background Image</title>
<style>
#image {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    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}')`;
}

function unDo() {
    document.getElementById("image").style.backgroundImage = "none";
    document.getElementById("image").innerHTML = "Hover over an image below to display here.";
}
</script>

</body>
</html>

登录后复制

注意事项

确保图片路径正确。
可以使用 CSS 来美化 div 元素和预览图。
unDo() 函数可以根据实际需求进行修改，例如恢复为默认图片而不是移除背景。
如果需要支持更多的图像，只需添加更多的 img 元素，并确保 upDate() 函数能够正确处理它们。

总结

通过本教程，你学会了如何使用 JavaScript 监听 mouseover 事件，动态改变 div 元素的背景图片。这种技术可以应用于各种场景，例如图片预览、产品展示等，为用户提供更丰富的交互体验。这种方法直接在HTML中绑定事件，虽然简单，但是不利于维护，建议使用addEventListener() 方法进行事件绑定。

以上就是使用 JavaScript 根据鼠标悬停的图像元素动态改变 div 背景的详细内容，更多请关注php中文网其它相关文章！