Заполнить изменение цвета при наведении группы элементов

Question

В svg on hover я могу изменить непрозрачность группы, как я могу изменить цвет заливки всех членов группы? Я хотел бы изменить цвет заливки всех членов группы при зависании над любым элементом внутри группы.

<?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.

Таким образом, для (а) вам нужно будет сделать:

<?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/