Svg:一次悬停在两条路径上

Question

我正在尝试在SVG上进行基本悬停,该SVG有两条路径,但我希望这两条路径都受到悬停的影响.当我尝试它时,悬停在每个路径上单独工作.

http://jsfiddle.net/mexicanbandit/aLs36j4c/

path:hover {
    fill: rgb(230, 100, 100);
}

刚刚将悬停应用于路径.我尝试将一个类应用于每个并将悬停应用于该但仍然具有相同的结果.

谢谢

Answer 1

您可以使用选择器svg:hover path并path在将鼠标悬停在父svg元素上时更改s 的颜色:

更新的示例

svg:hover path {
    fill: rgb(230, 100, 100);
}

正如Duopixel在下面提到的那样,如果你有多个路径svg,你可以包装所需的paths以便定位它们.

这里的例子

例如:

svg .arrows:hover path {
    fill: rgb(230, 100, 100);
}

<g class="arrows">
    <g>
        <g>
            <path fill="#C8C7C7" d="M7.333,22.42c10.167,6.531,20.333,13.063,30.5,19.596
        c-0.533-0.343,0.075-6.82,0.075-7.5c0-0.76,0.607-7.062-0.075-7.5C27.666,20.484,17.5,13.952,7.333,7.42
        c0.533,0.343-0.075,6.821-0.075,7.5C7.258,15.679,6.651,21.98,7.333,22.42L7.333,22.42z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C8C7C7" d="M67.667,7.419c-10.167,6.532-20.333,13.063-30.5,19.595c-0.682,0.438-0.075,6.74-0.075,7.5
        c0,0.68,0.608,7.157,0.075,7.5c10.167-6.531,20.333-13.063,30.5-19.595c0.683-0.438,0.075-6.741,0.075-7.5
        C67.742,14.24,67.134,7.762,67.667,7.419L67.667,7.419z" />
        </g>
    </g>
</g>