Q:

How to change two properties in two different classes on hover?

I have made two classes in a SVG-file to decide the fill color of many many different shapes. The different shapes are grouped and now I want them to change differently on hover. On hover I want all the fill in class "test1" (that are inside the groupe) to change to e.g. #000000 and to set the opacity in the class "test2" to 0.8.
<style type="text/css" >
    .test1 { fill:  #006600;}
    .test2 { fill:  #0000FF; opacity: 0.3;}
    g:hover { ????? }
</style>

Any leads?

A:

Assuming a markup such as...
<g>
  <rect class="test1" ... />
  <rect class="test1" ... />
  <rect class="test2" ... />
  <rect class="test2" ... />
</g>

Your CSS would be...
.test1 { fill:  #006600;}
.test2 { fill:  #0000FF; opacity: 0.3;}
g:hover .test1 { fill: #000; }
g:hover .test2 { opacity: 0.8; }

