CSS Transition bei hovern eines anderen Elements

[Pfandleiher]

Hallo Forum,

ich habe eine Seite, die zwei Themenfelder abdeckt, was farblich hervorgehoben werden soll.
Die dominierenden Farbe von Thema Rot wird rot, Thema Grün wird grün. Alles sehr vereinfacht natürlich....

Auf der Startseite soll die auswahl des Themas Rot oder Thema Grün durch zwei Links erfolgen. Wenn nun der Link zu Thema A gehovert wird, soll sich die Hintergrundfarbe (ein linearer Farbverlauf des alles umgebenden DIV-Elemets nach CSS3-Möglichkeit) ändern, jedoch optisch geschmeidig durch eine transition. Ich weiß dass man keine linear-gradient-Eigenschaften mit einer transition verändern kann. Daher möchte ich zwei DIVs (einer ist rot, der andere grün) übereinander legen und den oberen (roten) über die opacity unsichtbar faden, wenn der Link zum Thema Grün gehovert wird.

Also zunächst so (Minimalbeispiel):

  
#green{  
	background: green;  
	opacity: 1;  
}  
#red{  
	background: red;  
	opacity: 1;  
	transition: opacity 1s ease-out, opacity 1s ease;  
}  
  
#red:hover {  
	opacity: 0;  
}

Was jetzt passiert ist schon ähnlich von dem was ich mit vorstelle. Wird #red gehovert, so wird es unsichtbar. Rot verschwindet, grün kommt zum Vorschein. (Der linear gradient und das rückwärts faden beim verlassen von #red fehlt hier drin natürlich...)

Jetzt meine ungelöste Herausforderung:
Wie kann ich es erreichen, dass #red unsichtbar wird, wenn ein anderes Element (der Link eben) gehovert wird? Brauche ich hier für JavaScript? Kann mir dazu einer Stichworte hinwerfen, mit denen ich einen Lösungsansatz finden kann? Ich habe nämlich nicht mal eine Ahnung wonach ich Google fragen soll...

Wäre toll wenn mir einen ein paar Anstöße geben kann.

Danke und Grüße
Pfandleiher