为area地图元素添加hover动效GIF无效问题求助

核心问题 #

<area> 是不可渲染的空元素——它仅定义图片上的可交互热点区域，本身不会在页面生成可见的盒模型，所以你给它加的 background-image、position:absolute 等样式根本无法生效。虽然hover事件能触发（开发者工具显示GIF已加载），但样式没有可渲染的载体，自然看不到效果。

修复方案 #

需要额外添加一个专门用于显示GIF的容器，默认隐藏，当hover对应<area>时，触发容器显示并定位到热点区域位置。

修改后的HTML代码

<div class="image-container">
    <img src="main_image.png" usemap="#image-map">
    <map name="image-map">
        <area href="" coords="430,432,315,292" shape="rect" data-target="gif-1">
    </map>
    <!-- 新增的GIF显示容器 -->
    <div class="gif-overlay" id="gif-1">
        <img src="lil_dream.gif" alt="Hover effect">
    </div>
</div>

修改后的CSS代码

.image-container {
    width: 1500px;
    height: 1500px;
    position: relative;
}

/* 默认隐藏GIF容器 */
.gif-overlay {
    position: absolute;
    display: none;
    z-index: 1;
    /* 根据area的coords计算位置和尺寸：coords格式为x1,y1,x2,y2（左上、右下） */
    left: 315px;
    top: 292px;
    width: calc(430px - 315px);
    height: calc(432px - 292px);
}

/* hover area时显示对应GIF容器，同时保留容器hover状态防止消失 */
area[data-target="gif-1"]:hover ~ #gif-1,
#gif-1:hover {
    display: block;
}

关键细节说明 #

1. 坐标计算：<area>的rect类型coords顺序是左上x、左上y、右下x、右下y，所以容器的left取左上x，top取左上y，宽高用右下坐标减左上坐标计算。
2. 交互优化：加上#gif-1:hover的样式，是为了避免鼠标从<area>移到GIF上时，容器突然消失的问题。
3. 可扩展性：如果有多个热点区域，只需复制GIF容器并修改data-target和id对应关系，就能复用这套逻辑。

内容的提问来源于stack exchange，提问作者Prokrastinosaurus