berndkulow: links nur unterstreichen ohne Farbe

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

  1. Ich würds so machen:

    a.classname:hover         { color: #000000; text-decoration: underline;}

    Im doc dann
    <a class="classname" .....

    LG Rudi

  2. 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)

    --
    „Tue niemals etwas ausschließlich weil es jemand anderer tut – auch wenn dieser unter deiner tiefsten Verehrung steht.“ | Mein SelfCode
    http://cdauth.de/
  3. 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

    --
    “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
  4. 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

    1. 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

      1. 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

        1. 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

          1. 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

            1. 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

              1. 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

                1. 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