Question

我拥有使用g元素创建的5个不同区域的美国地图SVG。我想在悬停区域时更改区域的颜色，但我无法在悬停时获得结果。

当我通过检查一个元素在region-hover类上应用悬停效果时，它运行正常。

我要求对path个g元素内的所有region-hover元素悬停效果。

在下面找到我的代码并建议我是否有任何错误。

这是我的代码：

https://codepen.io/jaydipshingala/pen/qYBRwZ

Answer 1

只需删除阻止悬停的g path {pointer-events: none}：

该元素永远不会鼠标事件的目标; ^ref

.region-hover:hover .state-hover {
  stroke: #d45422 !important;
  stroke-width: 2px;
  stroke-linejoin: round;
  fill: #d45422 !important;
  cursor: pointer;
}


svg {
  max-width: 500px;
  height: auto;
}

https://jsfiddle.net/37tvx5bu/

Answer 2

您已将point-event: none添加到g path，这就是为什么:hover无法正常工作

悬停对SVG的影响

2 个答案: