Hover Problem

[BillaBong]

Hallo,

ich habe folgendes Problem:

<style>

.eins{
	border-style:solid;
	border-width:1px;
	border-color:green;
}


.zwei{
	background-color:yellow;
	width:100px;
	height:20px;
	border-style:solid;
	border-width:1px;
	border-color:red;
}

.zwei A:hover, eins A:hover{
	background-color:green;
	width:100px;
	height:20px;

}


</style>


<ul>
	<li class="eins">Hallo
		<ul>
			<li class="zwei"><a href="#">test1</a></li>
			<li class="zwei"><a href="#">test2</a></li>
			<li class="zwei"><a href="#">test3</a></li>
			<li class="zwei"><a href="#">test4</a></li>
		</ul>
	</li>
</ul>

Beim "Hover" über "class=zwei" Links wird dessen Hintergrund grün gefärbt. Ich möchte erreichen das beim "class=zwei -> Hover" aber auch "class=eins" den Hintergrund ändert. Hat jemand eine Ahnung wie man so etwas realisieren könnte ? Ist das überhaupt möglich?

 

[Maik]

Hi,

aber sicher ist das möglich

.zwei:hover{
    background-color:green;
}

Falls du hierbei den IE6 berücksichtigst, empfehle ich dir zusätzlich die Implementation dieses Scripts:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Denn die älteren IEs (bis IE6) unterstützen die :hover-Pseudoklasse ausschließlich für das a-Element.

Quelle des Scripts: http://code.google.com/p/ie7-js/

mfg Maik

 

[BillaBong]

Hi Maik,

ne das ist klar.

//Falsch wegen ausprobieren

.zwei A:hover, eins A:hover{
    background-color:green;
    width:100px;
    height:20px;

}

//So ist richtig :-D

.zwei A:hover{
    background-color:green;
    width:100px;
    height:20px;

}

Ich hatte das falsch eingestellt war am rumprobieren, ich möchte ja das sich bei class=zwei Hover class=eins ändert.

 

[Maik]

ich möchte ja das sich bei class=zwei Hover class=eins ändert.

Da sieht's schlecht für aus, denn die Selektoren können nicht "rück- bzw. aufwärts", sondern nur für Nachfolge-/Kinderelemente oder benachbarte Elemente definiert werden.

mfg Maik

 

[BillaBong]

hmm... sowas dachte ich mir schon. Ich probier mal noch ein bisschen rum, aber Trotzdem danke für den Tipp mit dem

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

das Problem hatte ich schon super oft und musste mir immer ein Bein ausreissen damit ich ne lösung gefunden habe %-). Wusste nicht das es sowas gibt.