Klassen weiter als bis zum Nachbar Objekt arbeiten lassen

Flummi1212 · #1 (**permalink**) 21.08.2014, 15:10

Hallo und guten Tag euch allen,

ich habe mir mithilfe der schönen neuen CSS3-Funktionen einen Würfel zusammengebaut welcher quasi als Navigator funktioniert. Nun lässt er sich momentan allerdings hauptsächlich nur mit einem JS steuern (dies ist gewollt weil ich persönlich die Steuerung eines Würfels mit der Tastatur sehr nett finde).

Da ich aber auch Besuchern die JS ausgeschalten haben den Cubus nicht vorenthalten möchte muss also noch eine zweite Steuerungsmöglichkeit hin.
Mein Grundgedanke war also das ich unten eine einfache Menüleiste noch anbringe mit den Hauptpunkten der 6 Würfelseiten und wenn man über diese geht der Würfel sich dann auf diese Position dreht.

Der hässliche Hacken an der ganzen Sache ist das so schön CSS auch sein mag, dessen Klassen oder ID's sind ja leider nicht Fähig weiter als bis zu Ihrem Nachbarelement zu Kommunizieren.

HTML-Code:

<body>
  <div id="Cubus">  <!-- ID[Cubus] ist dafür zuständig das sich alles zusammen dreht-->
    <div class="Seite 1">
      Würfelseite 1
    </div>
    <div class="Seite 2">
      Würfelseite 2
    </div>
    <div class="Seite 3">
      Würfelseite 3
    </div>
    <div class="Seite 4">
      Würfelseite 4
    </div>
    <div class="Seite 5">
      Würfelseite 5
    </div>
    <div class="Seite 6">
      Würfelseite 6
    </div>
  </div>
  <div class="Würfelseite1link">//Link</Div>
  <div class="Würfelseite2link">//Link</Div>
  <div class="Würfelseite3link">//Link</Div>
  <div class="Würfelseite4link">//Link</Div>
  <div class="Würfelseite5link">//Link</Div>
  <div class="Würfelseite6link">//Link</Div>
</body>

So also jetzt nochmal auf das Beispiel bezogen:
Wird über einem Würfelseiten#link Divblock gehovert, so soll sich der Würfel entsprechend auf die Würfelseite drehen.

Problem:
Würfelseite1link macht das ganze noch genau so wie angedacht weil er als Nachbar des Cubus in CSS diesen ansprechen kann.
Ab Würfelseite2link wird dies allerdings schwierig denn hier ist kein Nachbar bezug mehr vorhanden und CSS stößt an seine Grenzen.

Hat jemand einen Vorschlag wie man das Ordentlich umgehen kann? Vielleicht gibt es ja auch einen total logischen Trick nur fällt er mir nicht ein ^^
Ich hoffe Ihr könnt mir helfen ich wäre euch super Dankbar.

Vielen Dank im Voraus.
MfG Lukas

cloned · #2 (**permalink**) 21.08.2014, 15:19

Trotz deiner Beschreibungen hab ich keinen Plan was du eigentlich machen willst. Deshalb auch in diesem Thread: Gibt es einen Live-Link, wo man sich das ansehen kann? Und HTML ohne das dazugehörige CSS ist nicht hilfreich. (gilt für den umgekehrten Fall auch)

Flummi1212 · #3 (**permalink**) 22.08.2014, 09:56

Bei dem Beispiel unten im Link ist es so das der Divblock Würfelseite6 das Nachbarelement vom Cubus ist. Die Problematik aber ist dennoch natürlich die gleiche. Die Divblöcke Würfelseite1-5 können bei einem Hover nicht den Würfel zum drehen bringen weil hierfür die Reichweite von CSS nicht ausreicht, da der Würfel kein Nachbarobjekt mehr ist.

Das Beispiel

Das einzige was ich bewirken möchte ist das die Rotationswerte X und Y geändert werden mit einem Mouseover sodass der Würfel sich dreht.

MfG Lukas

Flummi1212 · #4 (**permalink**) 22.08.2014, 11:52

Das ganze hat sicher erledigt das Problem ist gelöst und der Code noch etwas schmaler geworden

MfG Lukas

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
preg_replace treibt mich in den Wahnsinn	olik	Serveradministration und serverseitige Scripte	14	30.03.2009 14:30
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 13:14
Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars!	Mavarik	CSS	8	26.07.2008 17:11