如何通过 CSS 或 jQuery 实现图像映射区域（area）的悬停换图效果_技术教程

本文详解如何在 html 图像映射（`` + ``）中，为不同多边形区域绑定鼠标悬停事件，动态切换主图片源，支持纯 css 方案（需结构优化）和更可靠的 jquery 方案，并指出常见错误及修复方法。

图像映射（Image Map）本身不支持对元素直接应用 :hover 伪类来改变父的 src——因为是不可见的语义化热点区域，无法触发 CSS 样式变更，也无法设置背景图或控制外部元素。你尝试的 .misc:hover { background-image: ... } 失效，正是因为 .misc 并非实际渲染的可见块级元素，且 background-image 无法覆盖的原始内容。

✅ 正确思路是：监听的鼠标事件，动态修改关联的 src 属性。推荐使用 jQuery（简洁可靠），也可借助现代 JavaScript（addEventListener），但需注意事件委托（因不冒泡到）。

✅ 推荐方案：jQuery + mouseenter/mouseleave（修复版）

首先，为每个添加唯一 id 或语义化 class（如 class="area-interactive"），并确保具有明确 class（如 class="main-map-img"）：

@@##@@

然后使用 jQuery 绑定事件（注意：必须等 DOM 加载完成，且修正语法错误——你原代码中漏了 $ 符号）：

$(document).ready(function() {
  // 悬停“Interactive”区域 → 切换为 interactive.png
  $('.area-interactive').on('mouseenter', function() {
    $('.main-map-img').attr('src', 'https://i.ibb.co/s32mqsM/interactive.png');
  }).on('mouseleave', function() {
    $('.main-map-img').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
  });

  // 悬停“Miscellaneous”区域 → 切换为 miscellaneous.png
  $('.area-misc').on('mouseenter', function() {
    $('.main-map-img').attr('src', 'https://i.ibb.co/ch71VJm/miscellaneous.png');
  }).on('mouseleave', function() {
    $('.main-map-img').attr('src', 'https://i.ibb.co/F59xHXy/portfolio.png');
  });
});

⚠️ 关键修复点：

('.portfolio').attr(...) ❌ → 缺少 $，应为 $('.portfolio').attr(...)；
元素不支持直接 hover 样式，但可绑定 JS 事件（jQuery 支持）；
使用 mouseenter/mouseleave 而非 mouseover/mouseout，避免子元素冒泡干扰。

✅ 进阶技巧：预加载图片防闪烁

频繁切换 src 可能导致首次悬停时短暂空白（图片未缓存）。建议预加载关键图片：

$(['https://i.ibb.co/s32mqsM/interactive.png',
   'https://i.ibb.co/ch71VJm/miscellaneous.png'].forEach(src => {
  $('@@##@@').attr('src', src).appendTo('body').css('display', 'none');
}));

✅ 纯 CSS 替代思路（仅限固定尺寸 & 重叠图层）

若所有图片尺寸完全一致，可将多张图片用绝对定位层叠，通过 :hover 控制 opacity 或 z-index 显示对应图层。但此法需额外 HTML 结构，且仍无法直接触发，需将 :hover 绑定到包裹容器（如

），再配合 pointer-events: none 避免遮挡热点：

  @@##@@
  @@##@@
  @@##@@
  ...

.map-container { position: relative; }
.overlay { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.2s; }
.map-container:hover .overlay-interactive { opacity: 1; }
/* 但此法无法按区域精准响应 —— 仅适用于整图切换 */

❌ 因此，区域级精确换图必须依赖 JavaScript 事件绑定 。