更改組中其他svg元素的顏色

我試圖使用css更改某個svg元素的顏色，當它被鼠標懸停時，還要更改同一元素的顏色，而其他元素的小組被盤旋。更改組中其他svg元素的顏色

的SVG組的代碼是：

<g id="Locations"> 
     <g id="Viner_Gallery"> 
      <path id="vinerGalleryQ" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M281.199,341.615c0,0-1.607,0-16.165,0 
       c-8.927,0-16.165-7.237-16.165-16.165c0-8.928,7.237-16.165,16.165-16.165c8.928,0,16.165,7.237,16.165,16.165 
       c0,3.792-1.306,7.278-3.492,10.036L281.199,341.615z"/> 
      <polygon id="vinerGalleryPoly" fill="#4D4D4D" points="264.973,315.891 255.245,332.141 274.495,332.141  "/> 
     </g> 
</g>

我想，當鼠標懸停改變#vinerGalleryQ的顏色，但我也想改變#vinerGalleryQ的顏色，當#vinerGalleryPoly懸停。

我試過jQuery，我寧願css，但我不能使所有工作 - 顯然有一些問題與jQuery和svg？

來源

2016-04-21 Davtho1983

不可能的CSS，因爲沒有以前的兄弟選擇。 jquery應該是可能的....你只需要做更多的研究。 –

這是你如何做到這一點：

.rect1 { 
 
    fill: red; 
 
} 
 

 
.rect2 { 
 
    fill: green; 
 
} 
 

 
g:hover .rect1 { 
 
    fill: orange; 
 
}

<svg> 
 
    <g> 
 
    <rect class="rect1" width="140" height="150"/> 
 
    <rect class="rect2" x="150" width="140" height="150"/> 
 
    </g> 
 
</svg>

來源

2016-04-21 18:25:33

更改組中其他svg元素的顏色

回答

相關問題