动态改变Div背景：基于鼠标悬停图片元素的JavaScript教程-html教程-PHP中文网

动态改变Div背景：基于鼠标悬停图片元素的JavaScript教程

碧海醫心

发布： 2025-10-14 10:43:53

原创

296人浏览过

动态改变div背景：基于鼠标悬停图片元素的javascript教程

本文旨在指导开发者如何使用JavaScript实现当鼠标悬停在不同的图片元素上时，动态改变一个Div元素的背景图片。通过简洁的代码示例和详细的解释，读者将学会如何利用`onmouseover`事件和JavaScript的DOM操作，实现交互式的网页效果。

实现原理

核心思路是利用HTML元素的onmouseover事件，当鼠标悬停在图片上时，触发一个JavaScript函数。该函数获取当前悬停图片的src属性，并将其设置为目标Div元素的backgroundImage样式。

HTML结构

首先，我们需要一个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事件。onmouseover事件触发upDate(this)函数，this关键字指向当前被悬停的图片元素。 onmouseout 事件触发 unDo() 函数，用于鼠标移出时恢复默认背景。

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

JavaScript代码

接下来，编写JavaScript函数来实现背景图片的动态改变。

图改改

在线修改图片文字

455

查看详情

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

function unDo(){
    document.getElementById("image").style.backgroundImage = "none"; // 或者设置为默认背景图片
}

登录后复制

upDate函数接收一个参数previewPic，它代表当前被悬停的图片元素。函数内部通过document.getElementById("image")获取到目标Div元素，然后修改其style.backgroundImage属性。使用了模板字符串（url('${previewPic.src}')）来动态构建背景图片的URL，previewPic.src会根据当前悬停的图片元素而变化。

unDo函数用于在鼠标移出图片区域时，移除背景图片，恢复默认状态。可以将 backgroundImage 设置为 "none"，或者设置为一个默认的背景图片。

完整示例

将HTML和JavaScript代码整合在一起，就可以实现动态改变Div背景的效果。

<!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 = "none"; // Or set to a default background image
}
</script>

</body>
</html>

登录后复制