如何用纯CSS实现SVG多边形鼠标悬停时填充变色

别担心，纯CSS完全可以搞定这个需求！你之前尝试的#N:hover { fill: #000; }无效，核心原因是内联style属性的优先级远高于普通CSS选择器——你给<polygon>直接写了style="fill:#fff"，这会把CSS里的hover样式直接覆盖掉。

解决步骤： #

• 把内联的fill样式从HTML中移除，放到CSS里统一管理
• 针对每个多边形（或用类统一处理）编写hover状态的样式

完整示例代码： #

<svg class="compass-svg" width="200" height="200">
  <polygon id="N" points="100,10 125,50 100,100 75,50" style="stroke:#000; stroke-width: 1;"/>
  <polygon id="NE" points="155,45 150,75 100,100 125,50" style="stroke:#000; stroke-width: 1;"/>
</svg>

/* 初始填充色 */
#N, #NE {
  fill: #fff;
}

/* 悬停时的填充色 */
#N:hover, #NE:hover {
  fill: #000;
}

更优雅的写法（用类统一控制）： #

如果后续有更多多边形，用类来管理会更方便：

<svg class="compass-svg" width="200" height="200">
  <polygon id="N" class="compass-segment" points="100,10 125,50 100,100 75,50" style="stroke:#000; stroke-width: 1;"/>
  <polygon id="NE" class="compass-segment" points="155,45 150,75 100,100 125,50" style="stroke:#000; stroke-width: 1;"/>
</svg>

.compass-segment {
  fill: #fff;
}

.compass-segment:hover {
  fill: #000;
}

为什么之前的代码无效？ #

内联style属性的优先级是最高的（权重为1000），而ID选择器的权重只有100，哪怕是:hover状态也无法覆盖内联样式。所以最好的做法是把样式从HTML中剥离到CSS里，保持结构和样式分离，也方便后续维护。

内容的提问来源于stack exchange，提问作者Philip F.