unterschiedliche "hover" mit CSS

[oliver]

Hallo zusammen

Ich hab echt n komisches Problem.
Hab 3 verschiedene Link versionen, eines für die Navigation, eines für den Inhalt und eines für den Footer. Doch leider funktioniert der "hover" nicht sauber.
Das CSS hab ich ganz normal in einem eigenen Dokument gespeichert und diese funktionieren auch alle. Doch wenn ich auf einen Link klicken und er wird somit "visited" dann, dann geht der "hover" nicht mehr!
Nehm ich den "visited" aus dem CSS raus, dann geht wohl der "hover" wieder aber der "visited" ist falsch...!
Zum verzweifeln...

Ich hab das schon n paar mal gemacht, aber irgendwie hab ich n Baum vor m Kop und blicke nicht durch, könnt ihr mir helfen?
danke

Gruss
Oliver

[Anschinsan]

URL? oder stylesheet?

Schwer was zu sagen, ohne das style zu sehen...

[oliver]

URL? oder stylesheet?

Schwer was zu sagen, ohne das style zu sehen...

ist etwas viel, aber ich mache mal das wichtigste rein:

A:link  {
 color: blue;
 text-decoration: none;
 font-weight: 550;
}
A:visited {
 color: purple;
 text-decoration: none
}
A:hover {
 color: red;
 text-decoration : underline;
}
A:active  {
 color: blue
}

.Navigation {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #000000;
}

A.Navigation:link {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #000000;
 text-decoration: none;
}

A.Navigation:hover {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FF0000;
 text-decoration: none;
}

A.Navigation:visited {
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 11px;
 font-weight: bold;
 color: #000000;

}

A.Navigation:active {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FF0000;
 text-decoration: none;
}

A.NavigationLight:link {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: normal;
 color: #000000;
 text-decoration: none;
}

A.NavigationLight:hover {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: normal;
 color: #FF0000;
 text-decoration: none;
}

a.NavigationLight:visited {
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 11px;
 font-weight: normal;
 color: #000000;
 text-decoration: none;
}

A.NavigationLight:active {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: normal;
 color: #FF0000;
 text-decoration: none;
}

.NavigationLightOn {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: normal;
 color: #FF0000;
 text-decoration: none;
}

.NavigationOn {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FF0000;
}

.NavigationDeakt {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #666666;
}

.Content {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}

.ContentBold {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
 font-weight: bold;
}

A.Content:link {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #000000;
 text-decoration: underline;
}

A.Content:hover {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FF0000;
 text-decoration: underline;
}

A.Content:visited {
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size : 11px;
 font-weight: bold;
 color: #000000;
 text-decoration: underline;
}

A.Content:active {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 color: #FF0000;
 text-decoration: underline;
}

[Anschinsan]

Hallo, mein Vorschlag:

/* Es gibt sicher eine Erklärung, warum es so funktioniert und bei einzelner festlegung nicht immer geht - aber ich weiß sie leider nicht ;-) */

a:link, a:visited, a:active, a:hover
{
 color: blue;
 text-decoration: none;
 font-weight: 550;
}

a:visited {color:purple;}
a:active {color:blue;}
a:hover {color:red; text-dcoration:underline;}

/* Die Reihenfolge spielt bei der Link Definition in CSS eine Rolle - genaueres kannst du nachlesen in http://www.css4you.de/ - Sehr empfehlenswert!*/

/* Wenn du die folgenden Links so stylest, sind automatisch alle Links im Div Container .navigation in dieser Erscheinungsform, das ist recht praktisch:*/

.navigation a:link, .navigation a:visited, .navigation a:active, .navigation a:hover
{
 color: blue;
 text-decoration: none;
 font-weight: 550;
}

.navigation a:visited {color:purple;}
.navigation a:hover {color:red; text-dcoration:underline;}
.navigation a:active {color:blue;}

... Dir ist sicher aufgefallen, dass ich mir die Arbeit gespart habe, alle deine styles zu kopieren - das Prinzip ist aber glaub ich ersichtlich... Dein Stylesheet wird so auch kürzer und einfacher zu warten.

mfg

Anschinsan

[oliver]

Es war die Reihenfolge...
Krass!
Erst visited und dann hover, dann gehts.

Danke für die Hilfe.

gruss
Oliver

[Tobias Kloth]

Hallo Oliver,

Doch wenn ich auf einen Link klicken und er wird somit "visited" dann, dann geht der "hover" nicht mehr!

ich vermute mal, dass du die Pseudoformate in der falschen Reihenfolge angegeben hast. Setzt mal die Zeile mit dem :visited vor die mit dem :hover - und wenn das nichts hilft, poste mal etwas Code (bzw. die URL zum Code).

Grüße aus Nürnberg
Tobias

[oliver]

Hi Tobias

Man das wars!
Ist ja n Hammer, geil, wusste nicht dass das so festgelegt ist in der Reihenfolge.
Suuuupperr.....

Tausend Dank.

Oliver

[Detlef G.]

Hallo oliver

Ist ja n Hammer, geil, wusste nicht dass das so festgelegt ist in der Reihenfolge.

Nein, die Reihenfolge ist nicht festgelegt, es gibt auch keine "richtige" oder
"falsche" Reihenfolge.

Du musst die Reihenfolge wählen, die deinen Vorstellungen entspricht.
Ein bereits besuchter Link, der gehovert wird, bleibt ja trotzdem auch
visited. Für ihn treffen dann beide Pseudoformate zu visited und hover.
Es werden dann bei sich widersprechenden Eigenschaften die gewählt, die
entweder später im CSS folgen oder die höhere Priorität haben.

Auf Wiederlesen
Detlef