CSS - Durch Hover über Box A eine Aktion bei Box B hervorrufen

Problem:

Ich möchte das, sollte ich den Mauszeiger über eine Box (divA) halten, das eine andere Box (divB) entweder erscheint (ToolTip oder Menü), oder ihr Aussehen verändert.

Lösung:

Das ganze läßt sich mit CSS realisieren und bietet viele Möglichkeiten es zu verwenden.

Das alles hängt an einen magischen Zeichen dem "+" o. "~". So, fangen wir mal an.

Es existieren zwei Boxen "divA" und "divB". Wenn ich über Box A fahre, möchte ich das Box B grün wird. Dazu müssen wir erstmal die Boxen erschaffen.

#divA {
	position: absolute;
	top: 1em;
	left: 1em;
	background-color: #E06624;
	text-align: center;
	width: 6em;
	height: 4em;
	font-size: 2em;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	line-height: 2em;
	padding-top:2em;
}
#divB {
	position: absolute;
	top: 1em;
	left: 8em;
	background-color: #E06624;
	text-align: center;
	width: 6em;
	height: 4em;
	font-size: 2em;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	line-height: 2em;
	padding-top:2em;
}

So, nun der Code. Er setzt sich zusammen aus "Element:hover + Elementzuändern {neue Eigenschften}" also,

#divA:hover + #divB {
	background-color: green;
}

Das schreiben wir noch unter das 1. CSS und erhalten dann folgendes Ergebnis:

Das Ganze geht, meines Wissens, nur mit dem Selector ":hover". Sollte man ein anderes Ereignis (anklicken, markieren usw.) bevorzugen sollte man Java-Script wählen.