hover-Einstellung nicht bei allen Links sichtbar (German / Deutsch)

by Zeun @, Thursday, August 13, 2015, 10:24 (3150 days ago)

Hallo,

hier meine nächste Frage zum Design unserer neuen Forumsseite
www.sehbehinderung.de/forum

Ich habe für den hover-Modus der Links eine dunkelblauen Hintergrund mit weiér schrift gesetzt. Das funktioniert auch fast überall, aber eben leider nur fast.
In den hellgraublauen Bereichen (subnavmenu usw.) erscheint die Hintergrundfarbe nicht, so dass weiße Schrift auf hellgraublauem Hintergrund steht und fast nicht sichtbar ist.
Woran kann das liegen. Habe schon einiges ausprobiert, aber ...
Das subnavmenu-2 wir als "display:inline" definiert; wird die css-Angabe auf inline-Elemente nicht angewendet?

Danke für eine weitere Hilfe dazu.
Gruß
Ulrich

Avatar

hover-Einstellung nicht bei allen Links sichtbar

by Auge ⌂, Thursday, August 13, 2015, 11:32 (3150 days ago) @ Zeun

Hallo

Ich habe für den hover-Modus der Links eine dunkelblauen Hintergrund mit weiér schrift gesetzt. Das funktioniert auch fast überall, aber eben leider nur fast.

Wenn du bitte mal ansagst, mit welchen CSS-Regeln du deinen dunkelblauen Hintergrund setzt, könnten wir weiterkommen.

In den hellgraublauen Bereichen (subnavmenu usw.) erscheint die Hintergrundfarbe nicht, so dass weiße Schrift auf hellgraublauem Hintergrund steht und fast nicht sichtbar ist.

Deine Regel für a:hover, die den Hintergrund setzt, wird von einer anderen Regel (#subnavmenu a.refresh), die spezifischer ist, überschrieben. Spezifischer heißt, dass das Zielelement, hier ein bestimmter Link, aufgrund der Nennung des Elternelements (#subnavmenu) und seiner eigenen Klasse (.refresh) genauer benannt ist, als mit a:hover und deshalb die spezifischere Regel angewendet wird und Angaben mit unspezifischeren Selektoren überschreibt.

Beachte dabei, dass die Schriftfarbe und die Angaben zum Rand (border) aus den Angaben zu a:hover tatsächlich angewendet werden, weil die Angaben in #subnavmenu a.refresh diese nicht überschreiben.

Das subnavmenu-2 wir als "display:inline" definiert; wird die css-Angabe auf inline-Elemente nicht angewendet?

Doch, wird sie.

In allen aktuellen Browsern gibt es Entwicklerwerkzeuge, die z.B. die für einzelne Elemente vorhandenen und überschriebenen Regeln nennen.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

hover-Einstellung nicht bei allen Links sichtbar

by Zeun ⌂ @, Thursday, August 13, 2015, 16:35 (3150 days ago) @ Auge

Hallo und danke für die schnelle Antwort.

Die von mir gesetze hover-Hintergrundfarbe ist #000066
Der code ist derzeit so:

a:hover{color:#fff;text-decoration:underline;background:#000066;border-right: 2px solid
#9B9A9F;border-bottom:2px solid #9B9A9F;}

Leider bin ich nun aber doch nicht so fit in CSS, um direkt zu wissen, wie ich jetzt für das subnavmenu oder a.refresh und die andern Auswahlpunkte die hover-Hintergundfarbe ändern kann.

Wie (welcehr Code) und wo kann ich das definieren, um zu merinem Wunschergebnis zu kommen?

Gruß
ulrich

PS: die näcshte Frage tut isch auch schon wieder auf, warte aber bis zu dieser Lösung. ;-)

hover-Einstellung nicht bei allen Links sichtbar

by Zeun ⌂ @, Thursday, August 13, 2015, 20:08 (3150 days ago) @ Zeun

Guten Abend,

dank deiner Hinweise, Auge, sowie nun ein bisschen weiterer Rercherche im Internet bin ich auf den passenden code gestoßen und habe ihn einbauen können, so dass es jetzt funktioniert, d.h. so aussieht, wie ich es wollte. :ok:
Allerdings habe ich für jedes a.xyz Element einzeln alle Link-zustandsarten eingegeben. Ob man das wirklich muss oder doch übergeordnet vereinfachen kann, weiß ich jetzt nicht genau. Es ist immer ein bisschen "Versuch und Irrtum"

Das war der Internethinweis zum Code, dir mir geholfen hat
a.menu { display:block; margin-bottom:5px; text-align:center; width:16ex;
border-style:ridge; border-width:3px; padding:2px; text-decoration:none; }
--------------------------------------------------------------------
a.[xyz]:link { color:#00f; background-color:transparent; }
a.[xyz]:visited { color:#00f; background-color:transparent; }
a.[xyz]:hover { color:#ff0; background-color:#00f; }
a.[xyz]:active { color:#ff0; background-color:#a03; }
--------------------------------------------------------------------

Ulrich

RSS Feed of thread