Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 21.08.2014, 15:10
Flummi1212 Flummi1212 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2014
Beiträge: 6
Flummi1212 kann nur auf Besserung hoffen
Standard Klassen weiter als bis zum Nachbar Objekt arbeiten lassen

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

Geändert von Flummi1212 (21.08.2014 um 15:12 Uhr) Grund: Sieht verständlicher aus
Mit Zitat antworten
Sponsored Links