javascript - 如何将悬停事件添加到 SVG 中的多个路径？它在 IE9 中工作吗？

Question

我一直在努力弄清楚如何创建一个悬停事件来控制 SVG 中的多个路径。在我正在创建的美国 map 中，阿拉斯加、夏威夷和密歇根是包含多条路径的分组元素。我已经能够使用 CSS 添加悬停事件，但是当我将鼠标悬停在具有分组元素的状态上时，只有我悬停在其上的路径发生变化。当我将鼠标悬停在它们上方时，我希望能够使处于适当分组状态的所有路径发生变化，就好像它们是一条路径一样。

似乎使用 CSS 无法实现我正在寻找的内聚性。也许是 jQuery？我已经搜索了一个 jQuery 解决方案，但我在某处读到 jQuery 在 SVG 中不能很好地工作。我试过 SMIL，但它似乎不适用于 IE9。

谁能帮我想出一个适用于 IE9 和最新的 Chrome、Safari 和 Firefox 浏览器的解决方案？

SVG 文件链接如下。您可以提供的任何帮助将不胜感激。谢谢。

http://sample.charlesjoyner.com/20150121-usa-map.svg

Answer 1

由于阿拉斯加位于 <g>你可以将悬停应用到那个...

    #Alaska:hover{fill-opacity:0.1; cursor:pointer;}