Brügä: Beim hover über ein div, ein anderes div verändern

Beitrag lesen

Hi,
ich habe mich bereits hiermit http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern über dieses Thema ein wenig schlau gemacht. Allerdings find ich das gezeigte Beispiel doch sehr unübersichtlich. Deswegen hab ich noch ein bisschen gegooglet und habe auch einfachere Beispiele gefunden. Mitlerweile bin ich soweit, das ich diese HTML Datei und diese CSS Datei habe:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Brügä's Pixelworld</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="Testwebsite">
<meta name="author" content="Sascha Brügmann">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="hov">
  touch
</div>

<div class="toll">
  toll
</div>

</body>
</html>

CSS:
.hov{position:absolute; width:100px; height:100px; border-width:1px; border-style:solid; left:100px; top:100px;}

.toll{position:absolute; width:100px; height:100px; border-width:1px; border-style:solid; left:300px; top:300px;}

.hov:hover .toll{background-color:red;}

Auf dieser HTML Seite soll man mit der Maus über das hov-div fahren können und dann verändert sich die Hintergrundfarbe vom toll-div in rot. Warum funktioniert das nicht?