Question

所以我试图让它成为当你悬停列表项时，它会改变相应svg形状的颜色。既然这些是单独div中的元素，那么只用css就可以做到这一点吗？

这是我目前所拥有的Codepen： http://codepen.io/rewerbj/pen/LVLRaK

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

我试过了：

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

那不起作用所以我不确定我是否将不得不使用jQuery，如果是这样，那么最有活力的方法就是这样。

欢迎任何建议。谢谢！

Answer 1

你不能这样做，因为（+）兄弟运算符只适用于相邻的div。

所以要实现这种效果

你必须以这样的方式改变你的HTML，以便形状出现在菜单

之后，或者你必须使用Jquery

Answer 2

如果您只想使用CSS执行此操作，则必须使用SVG运算符（you can read more about that here）将标题重新构建为与+地图片段相邻。如果你决定走这条路，这是你的代码的一个例子。

HTML

<div class="region-map-wrap">
    <div class="region-map">
        <div class="title1"><span class="num">1</span><span class="city">one</span></div>
        <svg class="item1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="97.907px" height="102.533px" viewBox="0 0 97.907 102.533" enable-background="new 0 0 97.907 102.533"
             xml:space="preserve">
        <g>
            <polygon class="map-shape" fill="#009A8B" stroke="#000000" stroke-miterlimit="10" points="4.559,101.959 0.513,25.768 33.772,0.623 97.33,47.07
                84.834,90.274   "/>
            <circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" cx="43.626" cy="55.002" r="24.27"/>
            <text transform="matrix(1 0 0 1 35.839 65.252)" fill="#FFFFFF" font-family="'OpenSans'" font-size="28.0337">1</text>
        </g>
        </svg>
    </div>
</div>

CSS

.title1 {
    font-size: 18px;
    font-family: verdana;
}

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

如果您想玩它，还需added a JS.Fiddle。请注意，标题现在位于SVG项目之上。

编辑：使用JQuery using this Fiddle进行讨论，您可以通过将SVG Attribute元素设置为十六进制值来悬停Fill个元素。

$('.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");
});

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

2 个答案: