无需JS/jQuery实现HTML<map>标签内区域悬停高亮的方法

纯HTML+CSS实现方案 #

原生<area>标签无法直接通过CSS配置可视化样式，我们可以将原有图片热区方案替换为内联SVG方案，完全复用你现有的多边形坐标，实现悬停高亮/动画效果：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>wizard forest</title>
    <style>
        svg {
            background: #ffcc66 url("img/wizard/area.png") center no-repeat;
            /* 请替换为你的area.png实际宽高 */
            width: 300px;
            height: 400px;
        }
        .click-area {
            fill: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        /* 悬停高亮效果 */
        .click-area:hover {
            fill: rgba(60, 180, 75, 0.6);
            /* 可追加动画效果，比如轻微放大 */
            transform: scale(1.02);
            transform-origin: center;
        }
    </style>
</head>
<body bgcolor="#ffcc66" align="center">
    <svg viewBox="0 0 300 400"> <!-- viewBox参数和上方宽高保持一致 -->
        <!-- 对应原有跳转wizard.html的热区 -->
        <a href="wizard.html">
            <polygon class="click-area" points="227,126,226,128,220,146,213,164,199,188,184,211,184,212,185,212,189,214,194,217,194,220,194,223,191,299,188,375,188,376,189,376,206,380,224,384,244,380,264,377,267,373,269,370,267,295,265,220,268,218,270,216,272,215,273,214,265,201,257,189,260,186,262,183,265,173,267,164,265,162,263,160,262,160,262,160,259,163,257,167,257,172,256,178,254,179,252,180,251,178,251,176,244,162,238,149,234,140,231,131,230,127,228,124" />
        </a>
        <!-- 对应原有跳转map.html的热区 -->
        <a href="map.html">
            <polygon class="click-area" points="58,64,56,66,56,72,56,78,48,85,40,93,40,94,40,96,48,104,56,112,56,117,56,122,58,124,60,126,126,126,192,126,194,124,196,121,196,93,196,65,194,63,191,61,125,61,60,61" />
        </a>
    </svg>
</body>
</html>

效果说明 #

• 热区坐标完全复用你原有<area>的配置，不需要重新标注
• 悬停时默认显示半透明绿色高亮，同时有轻微放大的过渡动画，所有效果均为纯CSS实现，没有引入任何JS
• 你可以自行修改.click-area:hover的样式，调整高亮颜色、透明度，或者追加自定义CSS动画实现闪烁、描边等其他效果

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