在一组元素上悬停填充颜色变化

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/