Christian: A:Active funktioniert nicht richtig

Hi

Mit folgendem Link

<a href="navigation/navigation.asp?kat=Demographie" class="hauptgruppe" target="nav">

und diesem CSS

.hauptgruppe  {
  font-weight: bold;
  font-size: 10px;
  font-family: Verdana;
  margin-top : 3px;
  height : 0px;
}

A {
  color: #FFFFFF;
  font-family: Verdana;
  text-decoration: none;
}

A:VISITED {
  color: #FFFFFF;
  font-family: Verdana;
  text-decoration: none;
}

A:LINK {
  color: #000000;
  font-family: Verdana;
  text-decoration: none;
}

A:HOVER {
  color: #000000;
  font-family: Verdana;
  text-decoration: none;
}

A:ACTIVE {
  color: #000000;
  font-family: Verdana;
  text-decoration: none;
}

bekomme ich immer wieder das selbe Resultat.
Wenn ich den Link anklicke wechselt er die Farbe (wie er das auch sollte). Wenn ich jetzt irgendwo auf der Seite ins Leere klicke (auch anderes Frame) wird der Link wieder weiss...??

Kann mir jemand weiterhelfen?

Danke
Christian

  1. Moin!

    Wenn ich den Link anklicke wechselt er die Farbe (wie er das auch sollte). Wenn ich jetzt irgendwo auf der Seite ins Leere klicke (auch anderes Frame) wird der Link wieder weiss...??

    Kann mir jemand weiterhelfen?

    Es gibt (unverständlicherweise) eine Reihenfolge, in der man die Link-Pseudoklassen definieren muß.

    http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm

    - Sven Rautenberg

    1. Hallo Sven,

      Es gibt (unverständlicherweise) eine Reihenfolge, in der man die Link-Pseudoklassen definieren muß.

      link / visited / hover / active / focus
      ist die "natuerliche" Reihenfolge der Benutzung eines Links:

      Ein Link kann unbesucht (link) oder besucht (visited) sein. Beide Zustaende koennen "hovered" und schließlich aktiviert werden. Der Link hat danach den Focus.

      MfG, Thomas

      1. Moin!

        link / visited / hover / active / focus
        ist die "natuerliche" Reihenfolge der Benutzung eines Links:

        Ein Link kann unbesucht (link) oder besucht (visited) sein. Beide Zustaende koennen "hovered" und schließlich aktiviert werden. Der Link hat danach den Focus.

        Das ist eine Eselsbrücke, aber keine gute Begründung.

        Wenn ich davon ausgehe, daß CSS eine lange Liste von Formatanweisungen ist, die vom Browser nacheinander zusammengesetzt wird für jedes Element (also erst nacheinander alle externen Dateien, dann interne Definitionen im HEAD, dann noch Definitionen am Element), dann ist für mich unverständlich, wieso plötzlich bei der Definition von Pseudoklassen für Links die Reihenfolge entscheidend sein soll, obwohl doch die einzelnen Zustände ganz wunderbar nebeneinander definiert werden. Kein Zustand hängt vom anderen direkt ab, keine zwei Zustände existieren logisch nebeneinander (ich will ja nicht die Schrift gleichzeitig rot und grün haben, sondern rot als :link und grün als :hover). Warum ist der Browser zu doof, aus meiner Liste die jeweils aktuell erforderliche Definition der Linkpseudoklasse herauszusuchen? Warum muß es sortiert sein?

        Wenigstens die CSS2-Spezifikation gibt da Auskunft:
        ---schnipp---
        Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
        ---schnapp---

        Das ist ein technischer und logik-organisatorischer Grund. :hover muß hinter :link und :visited, damit es seine Formatierung "darüber" legen kann. :active muß hinter :hover, damit es seine Formatierung seinerseits über :hover legen kann.

        :focus paßt in diese Reihenfolge nicht rein. :focus hat ein Element, wenn es per Tastatursteuerung angewählt wird, aber nicht, wenn es (wie du schreibst) angeklickt wurde. Bzw. dann verliert es den Status meist recht schnell wieder, weil eine neue Seite geladen wird. Ausnahmen wie der IE bestätigen die Regel. :)

        Deshalb gibts in dem Dokument vom W3C folgendes Beispiel:
        ---schnipp---
        An example of combining dynamic pseudo-classes:

        A:focus { background: yellow }
        A:focus:hover { background: white }

        The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.
        ---schnapp---

        http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements

        - Sven Rautenberg

        1. Hallo Sven,

          ich finde die Reihenfolge (mehr oder weniger) logisch.
          Etwas abgewandelt nach http://forum.de.selfhtml.org/archiv/2000_2/t15507.htm#a78712: Ein Link ist ein Link ist ein Link.

          Oder anders ausgedrückt: ein Link ist, auch wenn er bereits besucht wurde, immernoch ein Link. Ein Link, der gerade per Mausklick aktiviert wird, wird im selben Augenblick auch "gehovert" (usw., usw.). Alle Pseudoklassen sind also gleichberechtigt. Um nun zu erreichen, daß ein besuchter Link einen Hovereffekt erhält, muß halt zuerst :visited definiert werden und danach :hover, damit aufgrund der CSS-Regeln ("wer zuletzt kommt, malt zuerst" ;-) :hover auch tatsächlich zu sehen ist.

          Ich hoffe, ich war nicht zu konfus ;-)

          Viele Grüße
          Carsten

          PS: dementsprechend würde ich :focus auch an dritte Stelle setzen

  2. hallo christian!

    A:VISITED {
      color: #FFFFFF;
      font-family: Verdana;
      text-decoration: none;
    }

    kann es sein, dass er immer wieder weiß wird, weil du bei a:visited weiß angegeben hast?

    mfg Roman