如何在悬停时影响非子元素?

jgb*_*jgb 5 css svg

所以我试图做到这一点,当你悬停一个列表项时,它会改变相应 svg 形状的颜色。由于这些是单独 div 中的元素,是否可以仅使用 css 来做到这一点?

这是迄今为止我所拥有的 Codepen:http ://codepen.io/rewerbj/pen/LVLRaK

那么我是否必须给每个 svg 部分一个不同的类名?

我试过了:

.region-list li:hover + .map-shape {
    fill: #213A46;
}
Run Code Online (Sandbox Code Playgroud)

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

欢迎任何建议。谢谢!

小智 0

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

所以要达到这个效果

  • 你必须以这样的方式更改你的 HTML,以便形状出现在菜单之后
  • 或者你必须使用 Jquery