Tag <a> und decoration

[Vlad88]

Hallo, brauche Hilfe, denn habe schlechte Verhältnisse mit <a>.
Also, HTML:

<a href="#">
<span class="hover-box"> Ja, moderne Wissenschaft hat viel erreicht,<br /> aber...
...............<br />
</span>
Mögliche Widerspruch.
</a>

Beim Überfahren ( Text "Mögliche Widerspruch") wird einblenden ,
dann sieht man, was in <span> steht.
Jetzt CSS.

span.hover-box {
    border: 1px solid #fc6;
    color: #000;
    display: none; 
    text-decoration: none;

}
span.hover-box:hover:before{
 text-decoration: none;   
}

a:hover span.hover-box {
    display: block; 
}

Alles OK, nur text-decoration: none;
funktioniert nicht, bleibt standardmäßig - underline.
Wo ist Fehler?
Danke.

[basti1012]

Hast du mal geschaut was text-decoration macht ?
https://wiki.selfhtml.org/wiki/CSS/E...ext-decoration

So sollte es besser sein
https://basti1012.bplaced.net/index....ner=php&id=119



Obwohl dein so funktioniert

[Vlad88]

Vielen Dank.
1. Ja, geschaut, verstehe was die macht (mindestens nach meiner Meinung)
2. Beispiel OK, aber ich wollte ein bisschen anders.
Text "Mögliche Widerspruch" mit Unterstrich,
Text in Box (Ja, moderne...) ohne.
Das noch nicht funktioniert ......
oder etwas schief momentan in meinem Kopf.

[basti1012]

He was?
Das Element a hat automatisch den Unterlinie-Strich.
Wenn man im a noch ein Span macht, wird das normalerweise vererbt und alles hat den Unterstrich.
Muss es den ein <a> Element sein?
Ansonsten mach ein <span> raus oder ein <div>

https://basti1012.bplaced.net/index....ner=php&id=119

Text in Box (Ja, moderne ...) ohne.
Das noch nicht funktioniert ......
oder etwas schief momentan in meinem Kopf.

Das verstehe ich nicht

[Vlad88]

Ja, gerade so wollte ich
(https://codepen.io/basti1012/pen/abzwmqq),
THANKS.
Und verstanden (hoffe).

[protestix]

Im CSS

a:link {text-decoration: none;}

mehr ist nicht nötig.

[tk1234]

Beim Überfahren ( Text "Mögliche Widerspruch") wird einblenden ,
dann sieht man, was in <span> steht.

Ein "Überfahren" gibt es auf touch-Displays nicht, hover ist deswegen nicht geeignet zusätzliche Informationen einzublenden.

[Vlad88]

Im CSS

a:link {text-decoration: none;}

mehr ist nicht nötig.

Ja, klar.
Ein "Überfahren" gibt es auf touch-Displays nicht, hover ist deswegen nicht geeignet zusätzliche Informationen einzublenden.
Hm.... bin ein Idiot, absolute vergessen. Mag kleine Bildschirm nicht.
Könnten Sie Lösung vorschlagen?

[tk1234]

Hm.... bin ein Idiot, absolute vergessen. Mag kleine Bildschirm nicht.
Könnten Sie Lösung vorschlagen?

Es gibt durchaus auch große Monitore mit touch-Funktion, sowas ist nicht auf Smartphones und Tablets beschränkt.
Wie sich das Problem lösen lässt hängt ganz davon ab was da eigentlich dargestellt werden soll - grundsätzlich sollte der zusätzliche Text aber entweder immer angezeigt werden oder auch mit Aktionen erreichbar sein die es auch bei Touch gibt (z.B. "klicken" wobei sich das nicht über CSS alleine (sauber) lösen lässt).

[Vlad88]

Ja, danke,
muss mir überlegen.