# Mit Hover andere Klasse formatieren?



## Extremefall (26. April 2011)

Hallo,
ich habe folgenden Beispielcode:

```
div.menu:hover{
display:block;
background-color: #ffffff;
// hier sollte der Zugriff auf die andere Klasse erfolgen
}
```
Nun möchte ich gerne, wenn über das DIV der Klasse menu die Maus geht, dass die Hintergrundfarbe der Divs der Klasse menuitem geändert werden. Also soll die Formatierung sich nicht auf die Klasse menu sondern auf die Klasse menuitem beziehen. Ist so etwas mit CSS möglich, dass die Formatierung auf eine andere Klasse übertragen wird? Wenn ja, wie geht das?


----------



## CPoly (26. April 2011)

Befinden sich denn alle ".menuitem" unterhalb von ".menu"? Dann einfach so


```
div.menu:hover .menuitem {

}
```


----------



## Extremefall (26. April 2011)

Nein, so ist es leider nicht. Ich würde nämlich gerne eine vertikale Navigation mit Aufklappmenü in CSS realisieren. Hier mein ganzer Code:

```
<html>
<head>
<style type="text/css">
.menu{
width: 100px; 
background-color: #000000;
}
.menuitem{
width: 100px;
position: relative;
display: block;
float: right;
background-color: #003399;
}
div.menu:hover{
display:block;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="menu">Menü</div>
<span><div class="menuitem">Menuitem</div></span>
</body>
</html>
```


----------



## CPoly (26. April 2011)

Erstmal: DIV in SPAN geht nicht, weil span kein Block Element ist.

Man würde ein solches Menü mittels Listen aufbauen. Und normalerweise kann man dann diesen Selektor benutzen. Beispiel:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Vertikales Menü</title>
	
	<style type="text/css">
	.submenu {
		display:none;
	}
	
	.menu:hover .submenu {
		display:inline;
	}
	</style>
</head>

<body>
	<div>
		<ul class="menu">
			<li>Menü</li>
			<li class="submenu">
				<ul>
					<li>Menüitem</li>
					<li>Menüitem</li>
					<li>Menüitem</li>
				</ul>
			</li>
		</ul>
	</div>
</body>

</html>
```

Ansonsten könntest du, sofern du das SPAN Element entfernst, auch den Geschwister Selektor benutzen (Browser support beachten!)


```
div.menu:hover ~ .menuitem {

}
```


----------

