Vielecke mit CSS / Anwendung von :hover auf mehrere Elemente (Hat Roland gelöst!)

    Liebe Forumsbesucher,
    Können in CSS (regelmäßige) Vielecke, wie z. B. Sechsecke, erstellt werden? Ich habe zwar ein solches aus vier Rechtecken zusammen stellen können (je eines für jede Schräge, Rand je an zwei Außenseiten, mit skewX um je 30 Grad nach links bzw. rechts gekippt). Doch möchte ich meine Sechsecke für Links nutzen und sie bei Mauskontakt eine kräftigere Farbe annehmen lassen. Mit :hover in der Klasse wird immer nur das entsprechende Rechteck und damit nur ein Sektor des Sechsecks dunkler, was unschön ist.
    Ich freue mich sehr auf Vorschläge oder Lösungen,

    • ob und wie ich in meinem Fall bei Mauskontakt mit einem Rechteck das :hover gleich auf alle vier das Sechseck konstituierenden Rechtecke beziehe, sodass das ganze Sechseck bei Mauskontakt eines Sektors dunkel wird und
    • ob es nicht gleich eine Funktion für Vielecke in CSS gibt, mit der ich die Sechsecke einfacher als ein Element aufbauen kann und nebenbei :hover automatisch auf das ganze Sechseck bezogen wird.

    Meinen Code habe ich im Anhang. Bitte einfach .txt durch .htm(l) ersetzen, im Browser laden, und sich von der ungenügenden Performance überzeugen. Die Antwort auf eine der beiden Fragen wird bereits meine Probleme lösen. Dabei kannst Du gern den Code modifizieren. Vielen Dank im Voraus für alle Antworten!


    Johannes Vogel

    Hallo,


    also zu deinen ersten punkt du köntest deine Teile in ein div packen.

    HTML
    <div id="elterndiv">
<div class="Teile" id="Teil1"></div>
<div class="Teile" id="Teil2"></div>
<div class="Teile" id="Teil3"></div>
<div class="Teile" id="Teil4"></div>
</div>


    dann müsste es so gehen


    CSS
    #elterndiv:hover .Teile{
background:#f00;
}


    bei den 2ten suche ich mal

    Hallo Roland,


    herzlichen Dank! Es funktioniert genau so, wie ich es mir vorgestellt habe.
    Ich hatte schon darüber nachgedacht, ob es mit einem Eltern-Element funktionieren würde. Aber ich kannte bislang die mögliche Kombination #elterndiv:hover .Kinder {...} nicht. Und nur mit #elterndiv:hover {...}, wie ich es kannte, hätte es eben nicht geklappt.
    Mit diesem eleganten Weg hast Du mein Problem gelöst.
    Unabhängig davon kannst Du ja nach einer Funktion für Vielecke suchen, wenn es Dir keine Umstände macht. Das wäre ja auch sehr interessant.
    Wenn Du mal eine Frage hast, vielleicht kann ich sie ja lösen.
    Mit freundlichen Grüßen


    Johannes

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden