Thechip01: Problem mit opacity

Hallo liebe Forenleser und Schreiber,

ich habe ein Problem mit der CSS-Anweisung opacity:

Die Schriftfarbe soll standardtmäßig abgeblendet sein (opacity:0.5;) und bei hover wieder auf opacity 1 gesetzt werden.

Warum geht das nicht? In umgekehrter Folge funktioniert die Anweisung, d.h. wenn ich bei hover 0.5 gebe, und der Standardtschrift "1" wird abgeblendet.

Hier das Beispiel zum besseren Verständnis.

.ueberschriftnavgruen {
font-family:Asap;
font-variant:normal;
font-size:14px;
letter-spacing:2px;
color:#4B5A46;
opacity:0.5;
}

.ueberschriftnavgruen a:link {color:#4B5A46; text-decoration: none;}
.ueberschriftnavgruen a:visited {color:#4B5A46; text-decoration: none;}
.ueberschriftnavgruen a:hover {color:#4B5A46;opacity:1.0;}

Vielen Dank im Voraus.

  1. Hallo Thechip01,

    aus dem Codeauszug kann ich das nicht erkennen. Ich kann dir sagen, dass opacity nicht vererbt wird, möglicherweise ist das das Problem. Setze auch für ungehoverte Links einen opacity-Wert.

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    1. Hallo Matthias, danke für's Feedback. Beim ungehoverten Text steht opacity 0.5 und das wird auch wiedergegeben d.h. der Text wird abgeblendet dargestellt. Mit dem hover-Effekt kann ich zwar weitere Abblendungen vornehmen d.h. ich kann auf 0.3 setzen und es wird noch heller, aber ein Wert über 0.5 d.h. ein "aufblenden" wird nicht erkannt. Kann es sein, dass durch die Vererbung nur eine weitere Verringerung möglich ist und keine Erhöhung des Anfangswertes 0.5?

      Beste Grüße Willi

    2. Dank Matthias, hab's jetzt verstanden, der Wert muss bei a:link gesetzte werden wie du gesagt hast und nicht bei der Standardeinstellung der Schrift. Herzlichen Dank und beste Grüße

  2. Hallo,

    Die Schriftfarbe soll standardtmäßig abgeblendet sein (opacity:0.5;) und bei hover wieder auf opacity 1 gesetzt werden.

    Warum geht das nicht?

    das geht schon, aber nicht so.

    In umgekehrter Folge funktioniert die Anweisung, d.h. wenn ich bei hover 0.5 gebe, und der Standardtschrift "1" wird abgeblendet.

    Logisch. ;-)

    .ueberschriftnavgruen {
    font-family:Asap;
    font-variant:normal;
    font-size:14px;
    letter-spacing:2px;
    color:#4B5A46;
    opacity:0.5;
    }
    
    .ueberschriftnavgruen a:link {color:#4B5A46; text-decoration: none;}
    .ueberschriftnavgruen a:visited {color:#4B5A46; text-decoration: none;}
    .ueberschriftnavgruen a:hover {color:#4B5A46;opacity:1.0;}
    

    Du weist verschiedenen Elementen eine Teiltransparenz zu. Das Elternelement des Links setzt du fest auf opacity:0.5, und das bleibt auch so - das heißt, der gesamte Inhalt des Elements einschließlich des/der Links sind 50% transparent.
    Wenn du dem Link selbst, also dem a-Element, nun seinerseits opacity:1 gibst, ist das dessen Defaultwert, den das Element sowieso schon hat. Der wird aber bei der Darstellung mit den 0.5 des Elternelements multipliziert.

    Die Lösung ist genau das, was Matthias schon vorgeschlagen hat: Gib die verschiedenen opactiy-Werte demselben Element, nicht verschiedenen.

    So long,
     Martin

    PS: "Standardt" ist ja mal eine ganz neue Schreibweise. Die habe ich noch nicht gesehen.

    1. Hallo Martin, danke für die Lösung. und den Duden lern ich auch noch ;-)

      [Vollzitat entfernt]