SVG美国地图region-hover类g元素下path hover效果失效求助

我看了你的问题，核心原因是SVG的<g>元素本身不负责渲染填充色，它只是容器，而内部的<path>元素有自己的内联fill属性，优先级比从<g>继承的样式高，所以你直接给.region-hover:hover设置fill不会生效——因为<path>自己的填充色会覆盖继承来的样式。

下面给你两种可行的解决方案，按推荐程度排序：

方案一：统一用CSS管理填充色（推荐） #

把<path>里的内联fill属性去掉，然后用CSS统一设置默认色和悬停色，这样样式更易维护：

/* 设置区域默认填充色 */
.region-hover path {
  fill: #444; /* 替换成你原来的默认颜色 */
}

/* 悬停时改变区域颜色 */
.region-hover:hover path {
  fill: #ccc; /* 替换成你想要的悬停颜色 */
}

/* 可选：让容器可交互，鼠标悬停显示手型 */
.region-hover {
  pointer-events: all;
  cursor: pointer;
}

方案二：用!important覆盖内联样式（应急方案） #

如果你不想修改SVG里的内联属性，可以用!important强制覆盖<path>的内联fill：

.region-hover:hover path {
  fill: #ccc !important; /* 替换成你想要的悬停颜色 */
}

.region-hover {
  pointer-events: all;
  cursor: pointer;
}

为什么你检查元素时给.region-hover加hover能生效？大概率是你在检查器里直接修改了<path>的样式，而不是<g>的——所以看起来生效了，但实际代码里的写法不对。

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