tag:forum.selfhtml.org,2005:/self Problem mit opacity – SELFHTML-Forum 2016-03-06T17:45:06Z https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662447#m1662447 Thechip01 2016-03-06T17:14:03Z 2016-03-06T17:17:53Z Problem mit opacity <p>Hallo liebe Forenleser und Schreiber,</p> <p>ich habe ein Problem mit der CSS-Anweisung opacity:</p> <p>Die Schriftfarbe soll standardtmäßig abgeblendet sein (opacity:0.5;) und bei hover wieder auf opacity 1 gesetzt werden.</p> <p>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.</p> <p>Hier das Beispiel zum besseren Verständnis.</p> <pre><code class="block language-css"><span class="token selector">.ueberschriftnavgruen</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span>Asap<span class="token punctuation">;</span> <span class="token property">font-variant</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span>0.5<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:link</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:visited</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:hover</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span>1.0<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> <p>Vielen Dank im Voraus.</p> https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662448#m1662448 Matthias Apsel 2016-03-06T17:24:10Z 2016-03-06T17:24:10Z Problem mit opacity <p>Hallo Thechip01,</p> <p>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.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662450#m1662450 Der Martin 2016-03-06T17:35:11Z 2016-03-06T17:35:11Z Problem mit opacity <p>Hallo,</p> <blockquote> <p>Die Schriftfarbe soll standardtmäßig abgeblendet sein (opacity:0.5;) und bei hover wieder auf opacity 1 gesetzt werden.</p> <p>Warum geht das nicht?</p> </blockquote> <p>das geht schon, aber nicht so.</p> <blockquote> <p>In umgekehrter Folge funktioniert die Anweisung, d.h. wenn ich bei hover 0.5 gebe, und der Standardtschrift "1" wird abgeblendet.</p> </blockquote> <p>Logisch. ;-)</p> <blockquote> <pre><code class="block language-css"><span class="token selector">.ueberschriftnavgruen</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span>Asap<span class="token punctuation">;</span> <span class="token property">font-variant</span><span class="token punctuation">:</span>normal<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span>0.5<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:link</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:visited</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">.ueberschriftnavgruen a:hover</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>#4B5A46<span class="token punctuation">;</span><span class="token property">opacity</span><span class="token punctuation">:</span>1.0<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> </blockquote> <p>Du weist <em>verschiedenen</em> 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.<br> 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.</p> <p>Die Lösung ist genau das, was Matthias schon vorgeschlagen hat: Gib die verschiedenen opactiy-Werte <em>demselben</em> Element, nicht verschiedenen.</p> <p>So long,<br>  Martin</p> <p>PS: "<a href="http://www.duden.de/rechtschreibung/Standard_Norm_Richtmasz_Guete" rel="nofollow noopener noreferrer">Standardt</a>" ist ja mal eine ganz neue Schreibweise. Die habe ich noch nicht gesehen.</p> https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662449#m1662449 Thechip01 2016-03-06T17:33:57Z 2016-03-06T17:33:57Z Problem mit opacity <p>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?</p> <p>Beste Grüße Willi</p> https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662451#m1662451 Thechip01 2016-03-06T17:41:02Z 2016-03-06T17:41:02Z Problem mit opacity <p>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</p> https://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662452#m1662452 Thechip01 2016-03-06T17:45:06Z 2016-03-06T17:49:46Z Problem mit opacity <p>Hallo Martin, danke für die Lösung. und den Duden lern ich auch noch ;-)</p> <blockquote> <p>[Vollzitat entfernt]</p> </blockquote>