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

我试图在有两条路径的SVG上进行基本悬停，但我希望这两条路径都受到悬停的影响。当我尝试它时，悬停在每个路径上单独运行。Svg：一次悬停在两条路径上

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

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

刚刚应用的悬停的路径。我试着给每个应用一个类，然后应用悬停，但它仍然有相同的结果。

感谢

来源

2015-02-11 Ravi

悬停在父时，您可以使用选择svg:hover path和改变path S的颜色，svg元素：

Updated Example

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

由于Duopixel mentions below，如果你在svg内有多条路径，y你可以包装所需的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>

来源

2015-02-11 16:51:01

我看到是如何工作的吧。如果你将鼠标悬停在svg上，路径将改变它的填充位置。当定时器完成时，我会接受这个答案。谢谢！ – Ravi 2015-02-11 16:54:28

如果你在SVG中有更多的路径，那么用'g'元素包装你的路径，比如'g class =“path-group”>'然后'g.path-group：hover path {fill：red} ' – Duopixel 2015-02-11 17:15:16

@Duopixel谢谢！忘了提到这一点。 – 2015-02-11 17:21:05

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

回答

相关问题