在一組元素上懸停填充顏色變化

Question

在懸停的svg中，我可以更改組的不透明度，如何更改組中所有成員的填充顏色？當鼠標懸停在組中的任何元素上時，我想更改組中所有成員的填充顏色。

<?xml version="1.0" encoding="iso-8859-1"?> 
<svg version="1.1" baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="756.006px" height="576.006px" viewBox="0 0 10500 8000"> 


<style><![CDATA[ 
.region:hover`enter code here` 
{ 

    fill: #00FF00 !important; 
    opacity: .5; 

} ]]> 
</style> 


<g id="11" class="region" cursor="pointer" pointer-events="all"> 
    <rect style=" fill: #000000; stroke: none;" 
     x="1990" y="2347" width="1866" height="1605" 

    /> 
    <ellipse style="fill: #FF0000; stroke: none;" 
     cx="6011" cy="3239" rx="713" ry="768" 
    /> 
</g> 
</svg> 

Answer 1

與*選擇器。

.region:hover * 
{ 

    fill: #00FF00; 
    opacity: .5; 

} 

但是，這不是完整的解決方案，因爲您需要稍微修改SVG。原因是元素上的style屬性覆蓋CSS。因此，您需要（a）將SVG元素的顏色定義爲屬性（參見下文），或者（b）使用CSS規則定義它們。

所以，（a）您需要做的：

<?xml version="1.0" encoding="iso-8859-1"?> 
<svg version="1.1" baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="756.006px" height="576.006px" viewBox="0 0 10500 8000"> 


<style><![CDATA[ 
.region:hover * 
{ 

    fill: #00FF00; 
    opacity: .5; 

} ]]> 
</style> 


<g id="11" class="region" cursor="pointer" pointer-events="all"> 
    <rect fill="#000000" stroke="none" 
     x="1990" y="2347" width="1866" height="1605" 

    /> 
    <ellipse fill="#FF0000" stroke="none" 
     cx="6011" cy="3239" rx="713" ry="768" 
    /> 
</g> 
</svg> 

http://jsfiddle.net/XDvR9/