Svg：一次懸停在兩條路徑上

Question

我試圖在有兩條路徑的SVG上進行基本懸停，但我希望這兩條路徑都受到懸停的影響。當我嘗試它時，懸停在每個路徑上單獨運行。

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

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

剛剛應用的懸停的路徑。我試着給每個應用一個類，然後應用懸停，但它仍然有相同的結果。

感謝

Answer 1

懸停在父時，您可以使用選擇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>