Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[Auge]

Hallo

Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. https://www.kontakt-vs.de/kinderarbeit.html in der gleichen (türkisgrünen) Farbe hinterlegt bleibt, bis der Navigationsbereich gewechselt wird. Derzeit geschieht dies ja nur, solange die Maus in der Navigationsposition schwebt; das dürfte wohl in diesem Bereich (ungefähr) der "standard.css"

.topnav a:hover {
   background-color: #169f94;
   color: black;
}

.topnav a.active {
   background-color: #04AA6D;
   color: white;
}

zu ändern sein?

Fangen wir vorne an. Die Pseudoklassen, die du zu benutzen gedenkst, sind (unter anderem) auch für Links gedacht. Allerdings können sie nicht die von dir definierte Aufgabe erfüllen. Wo der Einsatzzweck für :hover, :focus ^[1] oder :visited klar sein dürfte, ist das bei :active oft nicht so klar.

Mit :active formatiert man einen Link in dem Zustand des angeklickt seins, also z.B. bei gedrückt gehaltener linker Maustaste. Dieses :activehat absolut nichts damit zu tun, dass genau das Dokument geladen wurde, dass das Linkziel des letzten Kicks auf der zuletzt geladenen Seite war. Von soetwas weiß CSS üblicherweise nichts. Ausnahme davon ist eine ID (ein „Fragment“) als Linkziel (zum Beispiel <a href="#top">).

Wenn du also in der Navigation zu zur Zeit geladene Seite kennzeichnen willst, musst du sie im HTML-Quelltext kenntlich machen. Du kannst dazu im Link zur aktuellen Seite eine ID setzen oder das Attribut href weglassen. In beiden Fällen musst du dazu entweder bei statischen Seiten den HTML-Quelltext anpassen oder mit einer Programmiersprache die nötigen Änderungen einfügen. Auf dem Server kämen dazu zum Beispiel PHP, Python oder Perl infrage, im Browser selbst natürlich JavaScript. Die Endung .html lässt mich statische Seiten vermuten. Ist diese Annahme korrekt?

Im CSS kannst du einen Link mit einer ID als a#deineID {} ansprechen. Bei weggelassenem Atttribut hrefist das etwas aufwendiger. Du kannst diese Konstruktion auf verschiedene Arten ansprechen.

1. du kannst mit … a:not([href]) {} die expliziten Formatierungen für die aktuell geladene Seite notieren, die Formatierungen für „echte“ Links sollten vorher notiert sein
2. du kannst aber auch erst einmal die für die aktive Seite nötigen Formatierungen mit … a {} festlegen und für alle Links mit href hernach, soweit nötig, diese mit … a:link {}, a:visited {}, a:focus,a:hover {} und a:active {} überschreiben

Tschö, Auge

---

1. Da wo man die Regeln für :hover definiert, muss man das auch für :focus tun. Man kann dabei für :focus die gleichen Regeln wie für :hover anwenden, um für Tastaturbedienung das gleiche Verhalten wie für Maus- oder Touchbedienung zu erreichen. ↩︎