bei a:hover mehrere klassen ändern

[fraenzer]

Tachchen!

Ist es möglich, bei Überfahren eines Textes direkt mehrere Klassen auf einmal zu ändern? Ich habe nen Button, der aus designtechnischen Gründen aus drei Teilen besteht: top, middle und bottom. Jeder dieser Teile hat ein Hintergrundbild. Wenn ich jetzt mit der Maus über eines dieser Teile fahre, sollen alle drei Teile das Hintergrundbild wechseln.
Speziell handelt es sich um den Hintergrund eines Menüs. Jeder Menüpunkt besteht aus dem oberen Teil, dem Abschnitt, in dem der Text steht, und dem unteren Teil. Je nachdem, ob ich mich gerade auf der ersten oder zweiten Ebene des Menues befinde, wird der mittlere Teil gestaucht oder gestreckt.
ICh würde eine Lösung komplett ohne JavaScript bevorzugen, reines CSS ist mir da am liebsten.

Schonmal vielen Dank!

Gruß

fraenzer

[Phlo]

Hallo fraenzer,

Ist es möglich, bei Überfahren eines Textes direkt mehrere Klassen auf einmal zu ändern? Ich habe nen Button, der aus designtechnischen Gründen aus drei Teilen besteht: [...]

Schau Dir mal das hier an, das dürfte doch im Prinzip ähnlich sein. Hier werden die Hintergrundbilder von li und li a (linker und rechter Teil des Hintergrundes) bei hover geändert bzw. verschoben.

Phlo

[fraenzer]

Mhm, macht schon irgendwie das, was ich haben will, allerdings blick ich da noch nicht ganz durch.
Wenn ich mir mal drei Container bastel, die in einem drinliegen:

<div id="total">
   <div id="top"></div>
   <div id="middle">Startseite</div>
   <div id="bottom"></div>
</div>

Müßte doch erstmal als Grundgerüst passen.

Mein CSS sieht dann erstmal wie folgt aus:

#total {
   width:200px;
   font-size:93%;
}

#total #top {
   height:10px;
   width:100%;
   display:block;
   background:url("top.gif") no-repeat;
}

#total #middle {
   height:30px;
   width:100%;
   display:block;
   background:url("middle.gif") no-repeat;
}

#total #bottom {
   height:10px;
   width:100%;
   display:block;
   background:url("bottom.gif") no-repeat;
}

Damit hätte ich meinen Menuepunkt definiert.
Jetzt kommt die Kunst: in Deinem Beispiel verschiebt der, soweit ich das richtig verstanden habe, einfach den sichtbaren Bereich. Wenn also die Maus über total läuft, wird der sichtbare Bereich verschoben.
Die Bilder beinhalten einmal den normalen und einmal den aktivierten Zustand, und entsprechend sieht man entweder das eine oder das andere, richtig?

Gruß

fraenzer