links nur unterstreichen ohne Farbe
berndkulow
- css
Hallo,
ich möchte per css, aus externer css-datei, sämtliche Links so einstellen, dass sie sich nur bei hover unterstreichen. Ansonsten soll sich ihre Farbe nicht verändern. Also eine rote Überschrift soll rot bleiben und nur in ihrer eigenen Farbe unterstrichen werden. Eine schwarze, kleinere Überschrift soll schwarz bleiben und auch in der Größe unverändert und sich nur in schwarz unterstreichen.
Ich bekomme das hin, wenn ich jede Überschrift einzeln formatiere, aber nicht allein mit einer externen css-datei. Also auf meiner seite www.mailand.de sind die Teaser auf der unteren Hälfte genaus so formatiert. Aber wie kann ich das mit einer externen css-datei hinbekommen?
vielen Dank, ich bin gespannt. Bernd
Ich würds so machen:
a.classname:hover { color: #000000; text-decoration: underline;}
Im doc dann
<a class="classname" .....
LG Rudi
Heißa, berndkulow,
[…] sämtliche Links so einstellen, dass sie sich nur bei hover unterstreichen. Ansonsten soll sich ihre Farbe nicht verändern. Also eine rote Überschrift soll rot bleiben und nur in ihrer eigenen Farbe unterstrichen werden. Eine schwarze, kleinere Überschrift soll schwarz bleiben und auch in der Größe unverändert und sich nur in schwarz unterstreichen.
Was genau haben jetzt deine Überschriften mit Links zu tun? Wenn ich ehrlich sein soll, verstehe ich dein Problem nicht so ganz.
Caramba!
Grüße aus Biberach Riss,
Candid Dauth (ehemals Dogfish)
berndkulow,
ich möchte per css, aus externer css-datei, sämtliche Links so einstellen, dass sie sich nur bei hover unterstreichen. Ansonsten soll sich ihre Farbe nicht verändern.
Ob das sinnvoll ist, würd ich nochmal überdenken.
a {color: inherit}
IE rafft’s nicht.
Gunnar
Hallo berndkulow,
ich möchte per css, aus externer css-datei, sämtliche Links so einstellen, dass sie sich nur bei hover unterstreichen. Ansonsten soll sich ihre Farbe nicht verändern.
a:link { text-decoration:none; }
a:hover { text-decoration:unterline; }
Also eine rote Überschrift
<a href="mailand-galleria.html"><font size="-1" color="black" face="Verdana">Galleria Vittorio Emanuele II: <br/></font><font size="+1" color="#cb0000" face="Verdana">Konsum in Marmor</font></a>
Der Quelltext enthält keine Überschriften. Ändere das.
soll rot bleiben und nur in ihrer eigenen Farbe unterstrichen werden. Eine schwarze, kleinere Überschrift soll schwarz bleiben und auch in der Größe unverändert und sich nur in schwarz unterstreichen.
text-decoration beeinflusst die Farbe nicht.
Ich bekomme das hin, wenn ich jede Überschrift einzeln formatiere,
Das bezweifle ich.
aber nicht allein mit einer externen css-datei.
Und das wird nicht funktionieren. Per Pseudoklasse hover lässt sich da nur etwas machen, wenn du ein weiteres Element umschnallst, was allerdings der IE nicht schnallt.
Grüße
Roland
Guten Abend,
text-decoration beeinflusst die Farbe nicht.
Daher schlage ich border-bottem vor; da lässt sich sowohl die Form, Farbe als auch der Zeigerfokuseffekt einstellen.
Siehe auch https://forum.selfhtml.org/?t=106610&m=660953.
Mit Gruß
Dada
Hallo Dada,
text-decoration beeinflusst die Farbe nicht.
Daher schlage ich border-bottom vor
Das funktioniert in diesem Beispiel nicht ohne *:hover
und/oder „+
“-Selektor.
Grüße
Roland
Guten Abend Roland,
Daher schlage ich border-bottom vor
Das funktioniert in diesem Beispiel nicht ohne
*:hover
und/oder „+
“-Selektor.
Wieso? Bei mir funktioniert
<body>
<div>
<a href="#">die ist ein Text</a>
</div>
</body>
mit
a:hover {
color: #af9f00;
/*background-color:#c2b90b;*/
border-bottom:3px dashed #ff9f00;}
und mehr steht ja im html-Code von
<a href="mailand-galleria.html"><font size="-1" color="black" face="Verdana">Galleria Vittorio Emanuele II: <br/></font><font size="+1" color="#cb0000" face="Verdana">Konsum in Marmor</font></a>
auch nicht.
Mit Gruß
Dada
Hallo Dada,
a:hover {
color: #af9f00;
/*background-color:#c2b90b;*/
border-bottom:3px dashed #ff9f00;}
So weit, so gut.
<a href="mailand-galleria.html"><font size="-1" color="black" face="Verdana">Galleria Vittorio Emanuele II: <br/></font><font size="+1" color="#cb0000" face="Verdana">Konsum in Marmor</font></a>
Wie definierst du nun für das erste font-Element eine andere Unterstreichung als für das zweite?
Grüße
Roland
Guten Abend Roland,
a:hover .f {
border-bottom-style: solid; border-bottom-width: 4px; border-color: #00ff00;}
<a href="mailand-galleria.html">
<font class="f" size="-1" color="black" face="Verdana">Galleria Vittorio
^^^^^^^^^^
Emanuele II:
<br></br>
</font>
<font size="+1" color="#cb0000" face="Verdana">Konsum in Marmor</font>
</a>
hat bei mir den gewünschten Erfolg.
Weiteres erst wird es erst morgen Nachmittag geben, denn mein Kleiner muss jetzt raus und ich danach ins Bett,
gute Nacht
Dada
Hallo Dada,
a:hover .f {
border-bottom-style: solid; border-bottom-width: 4px; border-color: #00ff00;}<a href="mailand-galleria.html">
<font class="f" size="-1" color="black" face="Verdana">Galleria Vittorio
^^^^^^^^^^
Ja, das ist klar, widerspricht aber
| Ich bekomme das hin, wenn ich jede Überschrift einzeln formatiere,
| aber nicht allein mit einer externen css-datei.
Bernds Wunsch. Das wäre folgendermaßen möglich:
a:hover font { … }
a:hover font+font { … }
Nicht so im IE.
Grüße
Roland
Guten Morgen Roland,
wenn er an der html-Datei nichts ändern will, geht meine Lösung mit der Klasse natürlich nicht.
Aber ich würde Ihre Lösung gerne noch umstellen, damit wirklich nur die gewünschte Überschrift unterstrichen wird:
a font:hover {
border-bottom-style: solid; border-bottom-width: 4px; border-color: #00ff00;}
a font+font:hover {
border-bottom-style: solid; border-bottom-width: 4px; border-color: #ff0000;}
Nicht so im IE.
Zum MS IE-Testen muss ich immer außer Haus, dass dauert dann viel länger...
Mit Gruß
Dada