gpt4 book ai didi

css - Svg:同时悬停在两条路径上

转载 作者:行者123 更新时间:2023-12-01 22:33:24 25 4
gpt4 key购买 nike

我正在尝试在具有两条路径的 SVG 上进行基本悬停,但我希望这两条路径都受到悬停的影响。当我尝试时,悬停会单独作用于每条路径。

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

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

只是将悬停应用到路径上。我尝试为每个应用一个类并将悬停应用到它,但它仍然有相同的结果。

谢谢

最佳答案

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

Updated Example

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

作为Duopixel mentions below ,如果您在 svg 中有多个路径,您可以包装所需的 path 以定位它们。

Example Here

例如:

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>

关于css - Svg:同时悬停在两条路径上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28459858/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com