css - 如何在悬停时影响非子元素？

Question

因此，我试图做到这一点，以便当您将鼠标悬停在列表项上时，它会更改相应 svg 形状的颜色。由于这些是单独的 div 中的元素，是否可以只使用 css 来做到这一点？

这是我目前拥有的代码笔: http://codepen.io/rewerbj/pen/LVLRaK

然后我必须给每个 svg 部分一个不同的类名吗？

我试过:

.region-list li:hover + .map-shape {
    fill: #213A46;
}

那没有用，所以我不确定我是否必须使用 jQuery，如果是的话，最动态的方法是什么。

欢迎提出任何建议。谢谢你!

Answer 1

您不能这样做，因为 (+) 同级运算符仅适用于相邻的 div。

因此，要实现此效果，要么

您必须以这种方式更改 HTML，使形状紧跟在菜单之后

或者您必须使用 Jquery