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

【问题标题】：How can I affect a non-child element on hover?如何在悬停时影响非子元素？
【发布时间】：2015-08-26 04:36:21
【问题描述】：

所以我试图让它当你悬停一个列表项时，它会改变相应 svg 形状的颜色。由于这些是单独 div 中的元素，是否可以仅使用 css 来执行此操作？

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

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

我试过了：

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

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

欢迎提出任何建议。谢谢！

【问题讨论】：

基于 html，标题问题应该是，我如何在所述父母孩子的悬停时影响父母兄弟姐妹，这仅通过 css 是不可能的
我不认为你可以用纯 CSS 做到这一点，但用一个小 jQuery 应该很容易。
在CSS selectors level 4 中，只有当区域列表中的第一个LI 悬停时，我们才能使用.region-list:has(li:nth-of-type(1):hover) + .region-map > svg:nth-of-type(1) 匹配第一个SVG 元素。但截至目前，任何常见的网络浏览器都不支持它。

标签： css svg

【解决方案1】：

如果您只想使用 CSS 执行此操作，则必须使用 + 运算符 (you can read more about that here) 将标题重组为与您的 SVG 地图片段相邻。如果您决定走这条路，这里是您的代码示例。

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 混在一起，您可以通过将 Attribute Fill 元素设置为十六进制值来悬停 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");
});

【讨论】：

【解决方案2】：

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

所以要实现这个效果要么

你必须改变你的 HTML，使形状出现在菜单之后

或者你必须使用 Jquery

【讨论】：