tag:forum.selfhtml.org,2005:/selfProblem mit opacity – SELFHTML-Forum2016-03-06T17:45:06Zhttps://forum.selfhtml.org/self/2016/mar/6/problem-mit-opacity/1662447#m1662447Thechip012016-03-06T17:14:03Z2016-03-06T17:17:53ZProblem 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#m1662448Matthias Apsel2016-03-06T17:24:10Z2016-03-06T17:24:10ZProblem 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#m1662450Der Martin2016-03-06T17:35:11Z2016-03-06T17:35:11ZProblem 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#m1662449Thechip012016-03-06T17:33:57Z2016-03-06T17:33:57ZProblem 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#m1662451Thechip012016-03-06T17:41:02Z2016-03-06T17:41:02ZProblem 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#m1662452Thechip012016-03-06T17:45:06Z2016-03-06T17:49:46ZProblem 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>