text-decoration: underline und non innerhalb eines Links

[Kamodon]

Hi!
Kann man einem einzigen Link sowohl eine Unterstreichung als auch keine Unterstreichung zuweisen?

Beispiel:

<style>
a.example span span
{
color:#0c0;
text-decoration:none;
}

a.example:hover span span
{
color:#f00;
text-decoration:underline;
}
</style>

<div class="footer">
<a href="http://asdfsdfas.de/" class="example">This <span>is <span>a link</span></span></a>
</div>

Das scheint bei mir nicht zu klappen.

Grüße
Kamodon

[ChrisB]

Hi,

Kann man einem einzigen Link sowohl eine Unterstreichung als auch keine Unterstreichung zuweisen?

Und dann - soll es blinken, oder was?

Beispiel:

Als Problembeschreibung wenig tauglich.
Bitte beschreibe nachvollziehbar, was du erreichen willst.

Das scheint bei mir nicht zu klappen.

Bitte lies die Tipps für Fragende - noch mal.

MfG ChrisB

[Kamodon]

Kann man einem einzigen Link sowohl eine Unterstreichung als auch keine Unterstreichung zuweisen?

Und dann - soll es blinken, oder was?

Nein, ich erkläre vielleicht doch besser ausführlich:

Auf einer Website gibt es einen Textlink "Mein Twitter-Konto", vor dem sich ein kleines Twitter-Piktogramm befindet. Der Link ist normalerweise nicht unterstrichen. Wenn der Nutzer mit der Maus über das Twitter-Piktogramm fährt, soll der Textlink unterstrichen werden, das Piktogramm aber nicht. Dafür muss ich den Link aufteilen, und zwar - im Falle von a:hover - "Mit Unterstreichung" und "Ohne Unterstreichung". Mein Codebeispiel funktioniert nicht, daher erhoffe ich mir Hinweise von den Profis.

[Gunnar Bittersmann]

@@Kamodon:

nuqneH

ich erkläre vielleicht doch besser ausführlich:

Guter Vorsatz. Leider bleib es beim Vorsatz.

Auf einer Website gibt es einen Textlink "Mein Twitter-Konto", vor dem sich ein kleines Twitter-Piktogramm befindet.

Und wie hast du das Piktogramm sich dort befinden lassen?

Dafür muss ich den Link aufteilen

Möglicherweise ist er das schon.

Mein Codebeispiel […]

Als da wäre?

[…] funktioniert nicht

Was nicht funktioniert, ist „funktioniert nicht“ anstelle einer Problembeschreibung.

Qapla'

[Harlequin]

Yerf!

a.example span span
{
color:#0c0;
text-decoration:none;
}

Du kannst die Unterstreichung die durch ein äußeres Element nicht in einem inneren Element entfernen. Hier findet keine Vererbung der Eigenschaft statt, der Link zeichnet *seinen* Unterstrich einfach über alles.

Lösung: entferne den Underline vom Link und "zerstückle" den Inhalt in einzelne Spans mit und ohne Unterstrich.

Gruß,

Harlequin

[Kamodon]

Lösung: entferne den Underline vom Link und "zerstückle" den Inhalt in einzelne Spans mit und ohne Unterstrich.

So geht es, danke!

/* Footer allgemein */
.footer a {color:white; text-decoration:none;}
.footer a:hover {color:gray; text-decoration:underline;}

/* Footer Speziallink */
.footer a.speziallink:hover {color:gray; text-decoration:none;}

.footer a:link .twitter-iconlink, .footer a:visited .twitter-iconlink {opacity:0.5;}
.footer a:hover .twitter-iconlink, .footer a:active .twitter-iconlink, .footer a:focus .twitter-iconlink {opacity:1.0;}

.footer a:hover .twitter-textlink {text-decoration:underline;}

<a href="http://twitter.com/foo" class="speziallink"><span class="twitter-iconlink"><img src="images/gui/icons/twitter-small.png" alt="Twitter-Icon" /> </span><span class="twitter-textlink">Mein Twitter-Konto</a></span>

[Matthias Apsel]

Om nah hoo pez nyeetz, Kamodon!

Eine gute Anlaufstelle für solche Fragen ist das selfhtml-wiki.

Matthias