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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-14

浏览次数：次

返回列表

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

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

实现原理

核心思路是利用 J*aScript 的事件监听机制，监听图片元素的 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 元素添加了 onmouseover 和 onmouseout 属性，分别绑定了 upDate(this) 和 unDo() J*aScript 函数。 this 关键字会将当前 img 元素作为参数传递给 upDate 函数。

J*aScript 代码

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

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

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 和 J*aScript 代码整合在一起，得到完整的示例代码：




Dynamic Background Change




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

@@##@@

@@##@@

@@##@@

<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>

注意事项

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