Automatisch andere Elemente mit verändern

S

sipoh

Erfahrenes Mitglied
Hallo,

ich habe mal irgendwo gesehen, dass man mit einer CSS-Anweisung andere Klassen innerhalb eines Eltern-Elementes mit verändern kann.

HTML: 
<style type="text/css">

ul, li {list-style:none; margin:0px; padding:0px; font:12px "Trebuchet MS"}

ul li :hover {background:#ccc;}

ul li ul li :hover {background:#000;}

ul li ul li :hover > ul li {background:#aaa;}

</style>


<ul>
	<li>
		<a href="#">NAV</a>

		<ul>
			<li>
				<a href="#">SUB</a>
			</li>
		</ul>

	</li>
</ul>


Bei einem Hover über dem 2. LI soll auch das 1. LI was machen. Nämlich die Hintergrundfarbe in Schwarz ändern.
ul li ul li :hover > ul li {background:#aaa;}

Weiß jemand, wie das geht?
 
sipoh hat gesagt.:
Hallo,

ich habe mal irgendwo gesehen, dass man mit einer CSS-Anweisung andere Klassen innerhalb eines Eltern-Elementes mit verändern kann.

Bei einem Hover über dem 2. LI soll auch das 1. LI was machen. Nämlich die Hintergrundfarbe in Schwarz ändern.

Weiß jemand, wie das geht?
Zum Vergrößern anklicken....
Hi,

ich glaube, dass du da etwas falsch verstanden hast, denn das ist nicht möglich.

mfg Maik
 
Du hast die Möglichkeit, dem Element einen Bezeichner zuzuordnen, und mittels JS dessen CSS-Formatierung zu verändern - beispielsweise:

HTML: 
<ul>
        <li>
                <a href="#" id="test">NAV</a>

                <ul>
                        <li onmouseover="document.getElementById('test').style.background='#000'">
                                <a href="#">SUB</a>
                        </li>
                </ul>

        </li>
</ul>


mfg Maik
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>nested elements: hierarchical parent highlighting with :hover pseudoclass</title>

<style>

ul {list-style:none; margin:0px; padding:0px;}
li:hover > a {background:#000;}

</style>

</head>
<body>


<ul>

	<li><a href="">Oberlink</a>

			<ul>

				<li class="sub"><a href="#">Unterlink</a></li>

			</ul>

	</li>

</ul>



</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück