Javascript Map在Chrome中工作，但在Firefox中不工作

创建交互式地图时，我需要在鼠标悬停时放大所选对象。
CSS规则执行任务的这一部分

接下来，我需要放大的对象始终高于其他贴图对象。
Javascript完成这部分任务

在Chrome浏览器中一切正常。
使用CSS规则悬停和缩放在Firefox中不起作用，并且不会弹出选定对象

如果有任何解决这个问题的办法，我将不胜感激

document.querySelectorAll（'path.state1'）.forEach（path=>{
path.addEventListener（'mouseover'，e=>{
path.parentNode.parentNode.append（path.parentNode）；
});
});
.state1{
填充物：白色；
笔划：道奇蓝；
变换原点：中心；
变换框：填充框；
过渡：1s；
}
：hover.state1{
填充：道奇蓝；
笔画：白色；
笔画宽度：2px；
过滤器：url（#dropshadow）；
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}

“ID”-爱达荷州
州首府-博伊西
人口——228790
“UT”-犹他州
州首府-盐湖城
人口
城市186440
估算（2018）200591
“AZ”-亚利桑那州
州首府凤凰城
人口
城市1445632
估算（2018）1660272
内华达州
州首府城市-卡森市
人口
城市55274
估算（2018）55414
“或”-俄勒冈州
州首府塞勒姆
人口
城市154637
估算（2018）173442
华盛顿特区
州首府奥林匹亚
人口
城市46478
估计（2018）52555
加利福尼亚州
州首府-萨克拉门托
人口
城市466488
估计（2018）508529
如果删除JavaScript逻辑，代码将在Chrome和Firefox上运行，但路径重叠将是一个问题

要控制路径的“z-index”，您需要将当前路径附加到svg，但Firefox中的CSS不会应用悬停事件。为了解决这个问题，您需要将
：hover
重命名为
.scaled
，然后从javascript切换该类

您可以阅读我为什么添加了
setTimeout


document.querySelectorAll（'path.state1'）.forEach（path=>{
path.addEventListener（'mouseover'，e=>{
path.parentNode.parentNode.append（path.parentNode）；
常量路径=[…document.querySelectorAll（'path.state1'）]
设置超时（（）=>{
路径[paths.length-1].classList.add（'scaled'）；
},20)
});
});
document.querySelectorAll（'path.state1'）.forEach（path=>{
path.addEventListener（'mouseout'，e=>{
path.parentNode.parentNode.append（path.parentNode）；
常量路径=[…document.querySelectorAll（'path.state1'）]
设置超时（（）=>{
路径[paths.length-1].classList.remove（'scaled'）；
},20)
});
});
.state1{
填充物：白色；
笔划：道奇蓝；
变换原点：中心；
变换框：填充框；
过渡：1s；
}
.1.1按比例{
填充：道奇蓝；
笔画：白色；
笔画宽度：2px；
过滤器：url（#dropshadow）；
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}

“ID”-爱达荷州
州首府-博伊西
人口——228790
“UT”-犹他州
州首府-盐湖城
人口
城市186440
估算（2018）200591
“AZ”-亚利桑那州
州首府凤凰城
人口
城市1445632
估算（2018）1660272
内华达州
州首府城市-卡森市
人口
城市55274
估算（2018）55414
“或”-俄勒冈州
州首府塞勒姆
人口
城市154637
估算（2018）173442
华盛顿特区
州首府奥林匹亚
人口
城市46478
估计（2018）52555
加利福尼亚州
州首府-萨克拉门托
人口
城市466488
估计（2018）508529
如果删除JavaScript逻辑，代码将在Chrome和Firefox上运行，但路径重叠将是一个问题

要控制路径的“z-index”，您需要将当前路径附加到svg，但Firefox中的CSS不会应用悬停事件。为了解决这个问题，您需要将
：hover
重命名为
.scaled
，然后从javascript切换该类

您可以阅读我为什么添加了
setTimeout


document.querySelectorAll（'path.state1'）.forEach（path=>{
path.addEventListener（'mouseover'，e=>{
path.parentNode.parentNode.append（path.parentNode）；
常量路径=[…document.querySelectorAll（'path.state1'）]
设置超时（（）=>{
路径[paths.length-1].classList.add（'scaled'）；
},20)
});
});
document.querySelectorAll（'path.state1'）.forEach（path=>{
path.addEventListener（'mouseout'，e=>{
path.parentNode.parentNode.append（path.parentNode）；
常量路径=[…document.querySelectorAll（'path.state1'）]
设置超时（（）=>{
路径[paths.length-1].classList.remove（'scaled'）；
},20)
});
});
.state1{
填充物：白色；
笔划：道奇蓝；
变换原点：中心；
变换框：填充框；
过渡：1s；
}
.1.1按比例{
填充：道奇蓝；
笔画：白色；
笔画宽度：2px；
过滤器：url（#dropshadow）；
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}

“ID”-爱达荷州
州首府博伊斯