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

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

花韻仙語

发布： 2025-10-14 09:59:01

原创

337人浏览过

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

本文旨在介绍如何使用 JavaScript 监听鼠标悬停事件，并根据悬停的图片元素动态改变 div 元素的背景图片。通过本文，你将学会如何获取当前悬停图片的 URL，并将其应用到目标 div 元素的 `backgroundImage` 属性上，从而实现动态背景切换效果。

实现原理

核心思想是利用 JavaScript 的 onmouseover 事件监听器，当鼠标悬停在图片元素上时，触发一个函数。该函数获取当前图片的 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()">

登录后复制

在这个例子中，id 为 "image" 的 div 将作为背景容器。每个 img 元素都有 onmouseover 和 onmouseout 属性，分别用于指定鼠标悬停和离开时触发的 JavaScript 函数。 upDate(this) 会将当前 img 元素作为参数传递给 upDate 函数。 unDo() 函数用于恢复默认背景，我们稍后会实现。

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

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

查看详情

JavaScript 代码

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

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

function unDo() {
    document.getElementById("image").style.backgroundImage = ""; // 移除背景图片
}

登录后复制

upDate 函数接收一个参数 previewPic，它代表当前鼠标悬停的 img 元素。通过 previewPic.src 可以获取到图片的 URL。然后，我们使用 document.getElementById("image").style.backgroundImage 来设置 div 元素的背景图片。注意，这里使用了模板字符串（`url('${previewPic.src}')`）来动态构建 URL。

unDo 函数用于恢复默认背景，这里简单地将 backgroundImage 设置为空字符串。

完整示例

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

.preview {
  width: 100px;
  height: 80px;
  margin-right: 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 = "";
}
</script>

</body>
</html>

登录后复制