Css 如何影响悬停时的非子元素？

因此，我试图使它在悬停列表项时，改变相应svg形状的颜色。因为这些元素在单独的div中，所以只使用css就可以做到这一点吗

这是我到目前为止所拥有的代码笔：

然后我是否必须为每个svg部分指定不同的类名

我试过：

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

这不起作用，所以我不确定是否必须使用jQuery，如果必须使用jQuery，那么最动态的方法是什么

---

欢迎提出任何建议。谢谢大家!

您不能这样做，因为（+）同级运算符只在相邻的div中工作

---

因此，要实现这一效果，您必须以这样一种方式更改HTML，使形状紧跟在菜单之后，或者您必须使用Jquery

如果您只想用CSS实现这一点，您必须使用

+

操作符（）将标题重新构造为与

SVG

地图块相邻。如果您决定走这条路线，下面是一个代码示例

HTML

如果你想玩的话也可以。请注意，标题现在正好位于SVG项的上方

编辑： 使用JQuery，您可以通过将

属性
填充
元素设置为十六进制值来悬停
SVG
元素

$('.region-list .item').hover(function(){
    $(this).addClass('active');
    $('.region-map .map-shape').attr("fill", "#ff0000");
}, function(){
    $(this).removeClass('active');
    $('.region-map .map-shape').attr("fill", "#009A8B");
});

基于html，标题问题应该是，我如何影响所述父子悬停的父母兄弟姐妹，这是不可能通过css实现的。aloneI我不认为使用纯css可以做到这一点，但使用一点jQuery应该相当容易。在中，我们将能够使用
。区域列表：has（类型（1）：悬停的li:n）+区域映射>类型（1）的svg:n
仅当区域列表中的第一个LI悬停时才匹配第一个SVG元素。但到目前为止，任何普通的web浏览器都不支持它。
.title1 {
    font-size: 18px;
    font-family: verdana;
}

.title1:hover + .item1 .map-shape {
    fill: #213A46;
}

$('.region-list .item').hover(function(){
    $(this).addClass('active');
    $('.region-map .map-shape').attr("fill", "#ff0000");
}, function(){
    $(this).removeClass('active');
    $('.region-map .map-shape').attr("fill", "#009A8B");
});