HTML 的 ` ⚠️ 关键注意事项： ? 进阶提示：若存在多个热点区域，可为每个 .area-wrapper 添加 data-area-id 并统一管理 hover 状态，或借助 JavaScript 动态计算位置，实现响应式适配（需按比例缩放坐标）。.image-container {
width: 1500px;
height: 1500px;
position: relative;
}
.area-wrapper {
position: absolute;
/* 坐标解析：coords="x1,y1,x2,y2" → 左上(x1,y1)，右下(x2,y2) */
/* 注意：HTML area 坐标系原点在左上角，y 向下增长 */
top: 292px; /* y1 */
left: 315px; /* x1 */
width: 115px; /* x2 - x1 = 430 - 315 */
height: 140px; /* y2 - y1 = 432 - 292 */
/* 可选：提升可点击性与调试可见性 */
cursor: pointer;
}
.area-wrapper:hover {
background-image: url('lil_dream.gif');
background-size: cover;
background-position: center;
z-index: 10;
}
