JavaScript 图片预览悬停切换教程：动态更新大图区域的背景与文字-js教程-PHP中文网

JavaScript 图片预览悬停切换教程：动态更新大图区域的背景与文字

本文教你如何用 javascript 实现鼠标悬停小图时，动态更新大图容器的背景图像和显示文字，涵盖事件绑定、dom 操作与 css 背景设置的核心技巧，并推荐现代、可维护的代码实践方式。

本文教你如何用 javascript 实现鼠标悬停小图时，动态更新大图容器的背景图像和显示文字，涵盖事件绑定、dom 操作与 css 背景设置的核心技巧，并推荐现代、可维护的代码实践方式。

在初学 JavaScript 的交互开发中，实现“悬停预览”是一个经典且实用的入门任务。核心目标是：当用户将鼠标移至任意一张缩略图（.preview）上时，主展示区（#image）同步显示该图片的 alt 文字，并将其 src 地址设为背景图；鼠标移出后，恢复默认提示文本与空白背景。

关键在于动态拼接 CSS background-image 值。你已正确写出基础结构 url()，但需将当前被悬停元素的 src 属性值注入其中。注意：element.src 会返回浏览器解析后的完整 URL（如 https://.../bacon.jpg），这正是 url() 函数所需的参数。使用模板字符串（反引号）可简洁完成拼接：

document.getElementById('image').style.backgroundImage = `url(${element.src})`;

更进一步，我们应摒弃 HTML 中的 onmouseover/onmouseleave 内联事件（如 onmouseover="upDate(this)"），因其耦合度高、难以复用且不符合现代 Web 开发规范。推荐采用 addEventListener 方式集中管理事件：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// 获取所有预览图元素
document.querySelectorAll('.preview').forEach(img => {
  // 绑定鼠标进入事件
  img.addEventListener('mouseover', function() {
    document.getElementById('image').innerHTML = this.alt;
    document.getElementById('image').style.backgroundImage = `url(${this.src})`;
  });

  // 绑定鼠标离开事件
  img.addEventListener('mouseleave', function() {
    document.getElementById('image').innerHTML = 'Hover over an image to display the alt text.';
    document.getElementById('image').style.backgroundImage = '';
  });
});

✅ 注意事项：

确保 <div id="image"> 的 CSS 中设置了 <code>background-size: cover 或 100%（你已配置 background-size: 100%），否则背景图可能无法自适应容器尺寸；
若图片加载较慢，可添加 background-position: center 提升视觉一致性；
this 在事件回调中指向触发事件的 <img> 元素，等价于传参的 event.target，语义清晰且无需额外参数；
移出时清空 backgroundImage（设为空字符串）比设为 none 更稳妥，避免 CSS 优先级干扰。