CSS - Visuelle Orientierung in Tabelle

[Stefan]

Ich hab das versucht. Leider klappt das mit dem Hover (#a1:hover ~ #t1 {fill: red;} mit zwei IDs gleichzeitig nicht.

Das Ziel wäre hier, dass bei hover auf #a1 sich auch #t1 und #z1 auf den definierten fill Wert ändern.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="auswahl" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 601 395">
  <defs>
    <style>

	  
#a1 {fill: orange;}
#t1 {fill: green;} 
#a1:hover {fill: red;}	  
#a1:hover ~ #t1 {fill: red;}



    </style>
  </defs>
  <g id="t3">
    <rect class="cls-3" x="195" width="128" height="98"/>
  </g>
  <g id="t2">
    <rect class="cls-3" x="325" y="0" width="128" height="98"/>
  </g>
  <g id="t1">
    <rect class="cls-3" x="455" y="0" width="128" height="98"/>
  </g>
  <g id="z3">
    <rect class="cls-2" x="2" y="97" width="128" height="98"/>
  </g>
  <g id="z2">
    <rect class="cls-2" x="1" y="197" width="128" height="98"/>
  </g>
  <g id="z1">
    <rect class="cls-2" y="297" width="128" height="98"/>
  </g>
  <g id="a3">
    <rect class="cls-1" x="174" y="110" width="128" height="98"/>
  </g>
  <g id="a2">
    <rect class="cls-1" x="344" y="120" width="128" height="98"/>
  </g>
  <g id="a1">
    <rect class="cls-1" x="473" y="120" width="128" height="98"/>
  </g>
</svg>