Autor |
Nachricht |
nagazi
Threadersteller
Dabei seit: 29.05.2012
Ort: Oberhausen
Alter: -
Geschlecht:
|
Verfasst Fr 13.07.2012 17:31
Titel a:hover reagiert nicht |
|
|
Hallo MGI-Board,
ich habe das Problem, das auf meiner Seite die Menüpunkte nicht bei einem Hover sich farblich ändern.
Da ich keinerlei Fehler sehen kann, Poste ich euch HTML sowie CSS Code.
Code: |
<a class="link" href="index.php?site=home">
<span>Übersicht</span>
</a>
|
Code: |
#page_navi_head a:link { color: #E68A00; text-decoration: none; }
#page_navi_head a:hover { color: #FFFFFF; text-decoration:underline; }
#page_navi_head a:visited { color: #E68A00; text-decoration: none; }
#page_navi_head a:active { color: #E68A00; text-decoration: none; font-size: 12px; }
#page_navi_head a:focus { color: #FFFFFF; text-decoration: none; font-size: 14px; }
|
Was ich bereits getan habe ist, das ich von einem Fremden PC auf die Seite gegangen bin und wenn ich dort über den Menü Punkt hover dann wird dieser weiß, er wird erst durchgehend Orange angezeigt, wenn ich bereits diesen einmal ge"visited" habe.
Wenn ich aber a:visited auf Weiß stelle, bekomme ich das Problem, das die Menüpunkte Weiß werden ohne das man sie hovern muss.
Ich sehe den Fehler nicht. Wäre bei Hilfe dankbar.
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Fr 13.07.2012 17:44
Titel
|
|
|
"Denke daran :active und :hover wie oben dargestellt nach :link und :visited zu definieren, da sie sonst die Eigenschaften von :visited übernehmen und die eigene Definition ignorieren"
Zitat von CSS4You.
|
|
|
|
|
Anzeige
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 13.07.2012 17:45
Titel
|
|
|
Du solltest die Reihenfolge einhalten: link, visited, hover, active
Darüber hinaus verwendet man für visited das gleiche styling wie für link, und für active das gleiche wie für hover. Active ist sehr klick.
Focus wird für textlinks nicht verwendet sondern eher inputfelder.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 13.07.2012 17:55
Titel
|
|
|
:focus gilt auch für Links, z.B. beim Durchtabben oder bei Rechtsklick (nur ältere IEs kannten :focus nicht).
nagazi, Dein CSS-Schnipsel ist super-redundant, ich würde eine allgemeine Regel für a schreiben und dann nur noch die Änderungen deklarieren.
Und vergiss :link, das ist ein Relikt aus den 90ern, als a auch Sprungziel sein konnte. Dann musst Du auch nix für :visited deklarieren, das bei Dir eh identisch aussieht (soll :visited dagegen eine andere Farbe bekommen, deklarierst Du auch nur die).
Zuletzt bearbeitet von heiko_rs am Fr 13.07.2012 17:56, insgesamt 1-mal bearbeitet
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 13.07.2012 18:12
Titel
|
|
|
@Heiko_rs
Du zerstörst gerade mein weltbild
Was steht denn dann in deiner css Datei?
Und das mit dem focus sehe ich aber selten.
Bin mir ziemlich sicher dass dem IE da heute noch Infos fehlen in dieser Form.
|
|
|
|
|
nagazi
Threadersteller
Dabei seit: 29.05.2012
Ort: Oberhausen
Alter: -
Geschlecht:
|
Verfasst Fr 13.07.2012 18:13
Titel
|
|
|
Okay Vielen dank,
eigendlich alles was ihr geschrieben habt, war mir neu.
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Fr 13.07.2012 18:16
Titel
|
|
|
a:visited:hover ist übrigens auch möglich.
|
|
|
|
|
MargarineMann
Dabei seit: 13.07.2012
Ort: Lübeck
Alter: 38
Geschlecht:
|
Verfasst Sa 14.07.2012 01:01
Titel
|
|
|
Das nagazi eine Klasse Namens "link" genutzt hat, die in der CSS nie wieder auftaucht ist euch allen egal?
Die korrekte Deklaration wäre folgendes (in Deinem Beispiel):
HTML
Code: | <a class="link" href="index.php?site=home">
<span>Übersicht</span>
</a> |
CSS
Code: | .link a { color: #E68A00; text-decoration: none; }
.link a:hover { color: #FFFFFF; text-decoration: underline; }
.link a:visited { color: #E68A00; text-decoration: none; }
.link a:active { color: #E68A00; text-decoration: none; font-size: 12px; }
.link a:focus { color: #FFFFFF; text-decoration: none; font-size: 14px; } |
So sollte eigentlich alles super funktionieren. Die definierten stile zählen dann AUSSCHLIEßLICH für die "<a>"-TAGs der Klasse "link".
MfG
Helge I., Freiherr von Liubice
Zuletzt bearbeitet von MargarineMann am Sa 14.07.2012 01:02, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
hover-Button/hover-Bild wird darunter eingefügt
flashfilm reagiert nicht auf tasteneingabe
Javascript-Newsticker reagiert im IE anders...
[webapp] jQTouch reagiert langsam im iPhone
Corel Draw X4, Kontextmenü reagiert nicht
Hilfe Photoshop cs6 Objektvorkorrektur reagiert kaum
|
|