✔ Pseudo-Klasse: focus

[aheimburg]

Hallo,

mein stylesheet für die Navigation sieht wie folgt aus:

#navigation a:hover{
    text-decoration:underline;
    color:#ffffff;
    background:#39384f;
}

#navigation a:active{
    text-decoration:none;
    background:#39384f;
}

#navigation a:focus{
    background:#39384f;
    text-decoration:none;
}

es funktioniert gut, bis auf "focus". Wenn ich auf ein Element anklicke, behält das Element das ausgewählte Format nicht (hier die Farbe). Warum nicht?

Danke für die Hilfe!

 

[Maik]

Hi,

die Pseuoklasse :focus ist an der falschen Stelle notiert, denn sie wird vor :hover und :active genannt.

Falls das Problem im IE auftritt, sei dir gesagt, dass er diese Pseudoklasse als :active interpretiert.

 

[aheimburg]

Hallo,

Hi,
die Pseuoklasse :focus ist an der falschen Stelle notiert, denn sie wird vor :hover und :active genannt.
Falls das Problem im IE auftritt.. .

Es funktioniert auch nicht, wenn :focus vor den beiden Pseudoklassen ist.
Das Problem tritt im IE und FF.

 

[Maik]

Hi,

wenn ich die drei Pseudoklassen in der richtigen Reihenfolge angebe, funktioniert bei mir :focus im Firefox.

 

[aheimburg]

Hi,

wenn ich die drei Pseudoklassen in der richtigen Reihenfolge angebe, funktioniert bei mir :focus im Firefox.

Ich weiss nicht, was ich falsch tue, aber es funktioniert bei mir in beiden Browser nicht. Ich schicke nochmal mein code:

#navigation{
    background:#4a4963;
    margin:0 0 5px 0;
    padding:20px 0 10px 10px;
    list-style:none;
}

#navigation li{
    display:inline;
    margin:0;
    padding:0;

}

#navigation a{
    color:#ffffff;
    font-size:18px;
    text-decoration:none;
    margin-left: 20px;
    padding:20px 10px 10px 7px;
}

#navigation li.letzter a{
    border: none;
}

#navigation a:focus{
    background:#39384f;
    text-decoration:none;
}

#navigation a:hover{
    text-decoration:underline;
    color:#ffffff;
    background:#39384f;
}

#navigation a:active{
    text-decoration:none;
    background:#39384f;
}

nochmal Danke für die Hilfe!

 

[Maik]

Hi,

dann steuer die Navigation mal im Firefox mit der "Tabulator"-Taste (Taste mit zwei entgegengesetzten Pfeilen) an.

 

[aheimburg]

Hi,

dann steuer die Navigation mal im Firefox mit der "Tabulator"-Taste (Taste mit zwei entgegengesetzten Pfeilen) an.

Mit Tab funktioniert es. Nur mein Ziel ist es, dass die dunkle Farbe (#39384f) erhalten bleibt, wenn man einen Punkt aus der Navigation auswählt. Oder ist es nicht der Pseudo-Klasse mit focus zu realisieren?

 

[Maik]

:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)

:active = für gerade angeklickte Elemente

• Quelle: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

Wenn der Link "dauerhaft" die Hintergrundfarbe behalten soll, muss er mit CSS gesondert behandelt werden, wie beispielsweise:

#navigation a:active, #navigation a#current{
    text-decoration:none;
    background:#39384f;
}

Und in dem aufgerufenen Dokument erhält der Link die ID #current:

<a href="#" id="current">...</a>

 

[aheimburg]

Danke nochmal für die Hilfe Maik!