如何让Hover覆盖层仅显示在Image Map指定Area元素而非整页

我实现了鼠标悬停在Image Map的Area元素时显示简单覆盖层，但不知道怎么让覆盖层只出现在当前悬停的Area元素上。我是JS和HTML新手，这是作业要求，但课程没教JS，所以来求助。我只需要知道针对单个元素的实现方法，就能自行完成其余部分。

当前核心代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buses Map</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <img class="mapbus" src="Test_assets\Map_Rescaled.png" width="1920px" height="1080px" alt="BusesMap" usemap="#busmap">
    <map name="busmap">
            <area shape="circle" class="HounBStn" coords="932.5,463,16" href="Hounslow_Bus_Station.html" alt="HounslowBusStn"> 
            <area shape="circle" coords="829,463,14.5" href="TreatyCentre.html" alt="TreatyCtr">
            <area shape="rect" class="Overlay-81" coords="20,953,280,964" href="Bus_81.html" alt="">
            <area shape="rect" coords="20,967.5,315,979" href="Bus_110.html" alt="">
            <area shape="rect" coords="20,982,310,994" href="Bus_111.html" alt="">
            <area shape="rect" coords="20,997,275,1008" href="Bus_116.html" alt="">
            <area shape="rect" coords="20,1011.5,345,1023" href="Bus_117.html" alt="">
            <area shape="rect" coords="20,1026,275,1037" href="Bus_120.html" alt="">
            <area shape="rect" coords="20,1041,355,1052" href="Bus_203.html" alt="">
            <area shape="rect" coords="20,1055.5,245,1067" href="Bus_222.html" alt="">
            <area shape="rect" coords="385,953,645,964" href="Bus_235.html" alt="">
            <area shape="rect" coords="385,967.5,640,979" href="Bus_237.html" alt="">
            <area shape="rect" coords="385,982,690,994" href="Bus_281.html" alt="">
            <area shape="rect" coords="385,997,725,1008" href="Bus_423.html" alt="">
            <area shape="rect" coords="385,1011.5,680,1023" href="Bus_635.html" alt="">
            <area shape="rect" coords="385,1026,650,1037" href="Bus_681.html" alt="">
            <area shape="rect" coords="385,1041,635,1052" href="Bus_E8.html" alt="">
            <area shape="rect" coords="385,1055.5,640,1067" href="Bus_H20.html" alt="">
            <area shape="rect" coords="750,967.5,1110,979" href="Bus_H22.html" alt="">
            <area shape="rect" coords="750,982,1040,994" href="Bus_H28.html" alt="">
            <area shape="rect" coords="750,997,1095,1008" href="Bus_H32.html" alt="">
            <area shape="rect" coords="750,1011.5,1065,1023" href="Bus_H37.html" alt="">
            <area shape="rect" coords="750,1026,980,1037" href="Bus_H98.html" alt="">
            <area shape="rect" coords="750,1041,1100,1052" href="Bus_N9.html" alt="">
    </map>
    <div id="overlay">test</div>
    <script src="script.js"></script>
</body>
</html>

CSS #

#overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: aquamarine;
    display: none;
    z-index: 100;
}

.mapbus{
    display: block;
}

已实现的JS代码 #

document.querySelectorAll('area').forEach(area => {
    area.addEventListener('mouseover', () => {
        document.getElementById('overlay').style.display = 'block';
    });
    area.addEventListener('mouseout', () => {
        document.getElementById('overlay').style.display = 'none';
    });
});

尝试过的错误方法 #

1. 错误的类判断与样式修改代码：

if (document.area.class = 'Overlay-81') {
            document.getElementById('overlay').style.background-color == 'black';
        }

2. 尝试用CSS直接控制Area悬停（因Area标签不可见失效）：

.x:hover{
    opacity: 0.7;
    background-color: brown;
}

解决方案 #

核心思路 #

要让覆盖层匹配当前悬停的Area元素，需要：

• 解析Area的coords属性，计算对应位置和尺寸
• 根据Area的shape（矩形/圆形）设置覆盖层样式
• 悬停时更新覆盖层的位置、尺寸和自定义样式，移出时隐藏

修改后的JS代码 #

const overlay = document.getElementById('overlay');

document.querySelectorAll('area').forEach(area => {
    area.addEventListener('mouseover', () => {
        const coords = area.coords.split(',').map(Number);
        const shape = area.shape;
        
        // 重置覆盖层基础样式
        overlay.style.display = 'block';
        overlay.style.borderRadius = '0';
        overlay.style.backgroundColor = 'aquamarine';
        
        if (shape === 'rect') {
            // 矩形坐标格式：x1,y1,x2,y2
            const [x1, y1, x2, y2] = coords;
            overlay.style.left = `${x1}px`;
            overlay.style.top = `${y1}px`;
            overlay.style.width = `${x2 - x1}px`;
            overlay.style.height = `${y2 - y1}px`;
        } else if (shape === 'circle') {
            // 圆形坐标格式：x,y,r
            const [x, y, r] = coords;
            overlay.style.left = `${x - r}px`;
            overlay.style.top = `${y - r}px`;
            overlay.style.width = `${r * 2}px`;
            overlay.style.height = `${r * 2}px`;
            overlay.style.borderRadius = '50%';
        }
        
        // 针对特定类的自定义样式
        if (area.classList.contains('Overlay-81')) {
            overlay.style.backgroundColor = 'black';
            overlay.style.color = 'white';
        }
        if (area.classList.contains('HounBStn')) {
            overlay.style.backgroundColor = 'darkblue';
        }
    });
    
    area.addEventListener('mouseout', () => {
        overlay.style.display = 'none';
    });
});

优化后的CSS #

#overlay{
    position: absolute;
    display: none;
    z-index: 100;
    /* 增加过渡效果让显示更平滑 */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-sizing: border-box;
}

.mapbus{
    display: block;
    /* 确保图片作为覆盖层的定位参考 */
    position: relative;
}

关键修复点 #

1. 类判断错误修正：

   • 用area.classList.contains('类名')检测元素类，而非错误的document.area.class = '类名'
   • 修改样式时使用驼峰命名style.backgroundColor，并使用赋值符号=而非判断符号==

2. 覆盖层定位修正：

   • 原覆盖层占满全屏，现在根据Area的坐标计算精确位置和尺寸，让它刚好覆盖当前悬停区域

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