Mit Hover andere Klasse formatieren?

E

Extremefall

Mitglied
Hallo,
ich habe folgenden Beispielcode:
HTML: 
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?
 
Befinden sich denn alle ".menuitem" unterhalb von ".menu"? Dann einfach so

CSS: 
div.menu:hover .menuitem {

}
 
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: 
<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>
 
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:

HTML: 
<!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!)

CSS: 
div.menu:hover ~ .menuitem {

}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück