Css 单独SVG多边形的链接更改填充悬停

我在左侧列中有一个房间列表，在右侧列中有一个SVG楼层平面图。我有两个问题：

当左栏中的链接使用纯CSS滚动时，是否有办法更改楼层平面中房间的颜色

如果答案是否定的，我应该采取什么方法？我在猜测某种类型的JS，但不知道从哪里开始或搜索什么

以下是我目前为止的工作示例：

div#list{float:left；width:50%}
div#list ul li a{color:#333}
div#list ul li a:hover{color:#ED5D45}
div#map{浮点：右；宽度：50%}
div#map svg#plan polygon.building{fill:#CCC}
div#map svg#规划多边形。studio-j{fill:#333}
div#map svg#平面图a:hover polygon.studio-j{fill:#ED5D45}

这在CSS中是不可能的，因为链接与SVG无关

需要JS，这将简化问题

或者，只需将链接放在

#map

div中（不带列表结构），并相应地调整CSS

a：悬停{
颜色：红色
}
分区图{
浮动：对；
宽度：50%
}
div#map svg#plan polygon.building{
填充：#CCC
}
svg#规划多边形。studio-j{
填充：#333
}
svg#平面图a:hover polygon.studio-j{
填充：#ED5D45
}
.j:hover+svg#规划多边形。studio-j{
填充：绿色；
}

非常感谢您的回复。不幸的是，我无法重组。你能给我一些关于如何使用JS解决问题的广泛指导吗？不幸的是，关于堆栈溢出的广泛问题已经脱离主题了。我相信你可以在这里或通过谷歌进行一些搜索，这可能会提供一些见解。多么有用啊，先生。我更倾向于“我不能给你任何深入的建议，但是看看JS函数X或X”，但你不能总是得到你想要的。回到原点，因为我不知道该从什么开始搜索。看到右边的“相关问题”了吗？这应该可以让你开始了。对于阅读本文的任何人来说，广泛的帮助甚至是正确方向的推动显然都是“离题的”，我最终使用CSS、jquery和.hover和.toggleClass解决了这个问题。