Hover

MaWe · 16.06.2010

Hallo.

Ich bekomme folgendes Problem einfach nicht in den Griff:

Ein Link soll immer rot werden, wenn die Maus drüber fährt. Ansonsten soll der Text entweder schwarz oder grün sein, je nachdem, wo sich dieser Link befindet.

Folgende CSS Definitionen habe ich gemacht:

Code:

body a:link, body a:visited {
color:#000000;
}
body a:hover {
color:#c00000;
}

Dabei werden sämtliche Links schwarz (bzw. rot beim drüberfahren).

Jetzt will ich an einer Textstelle welche auch per CSS auf grün gesetzt ist, dass dieser Link grün bleibt, ausser beim drüberfahren.

Wenn ich im HTML den Link wie folgt definiere, dann ist er zwar grün, wird aber auch nicht rot beim drüberfahren:

HTML:

siehe auch <a href="Test.html" style="color: #008000;">Test</a>

Habs auch schon mit in CSS definierter class versucht. Das haut leider auch nicht hin.

Was kann ich da noch machen ?

Danke im Voraus
Gruss
MaWe

developr · 16.06.2010

Du kannst deinem Link eine Class zuweisen.

HTML:

<a href="Test.html" class="gruen">Test</a>

Per CSS definierst du dann die Class.

Code:

.gruen:link, gruen:visited {
color: #008000;
}
.gruen:hover {
color: #c00000;
}

Wann immer du nun einen Link mit class="gruen" versiehst, wird der Link so wie du ihn haben möchtest - grün und bei Mouseover rot.

Übrigens brauchst du davor nicht body schreiben, ist dem Browser schon klar, dass es sich im Body befindet, woanders ist's ja auch gar nicht möglich ;-).

MaWe · 16.06.2010

Hallo.

Danke für die schnelle Antwort.

Genau diese CSS Definition habe ich auch schon gemacht.
Parallel dazu habe ich aber auch noch die Definition für den body, da die Links an anderer Stelle ja schwarz sein sollen.
Mein CSS sieht so aus:

Code:

body a:link, body a:visited {
color:#000000;
}
body a:hover {
color:#c00000;
}
body a:active {
color:#c00000;
}
.gruen:link, gruen:visited {
color: #008000;
}
.gruen:hover {
color: #c00000;
}

Wenn ich dann den HTML Code so nehme:

HTML:

<a href="Test.html" class="gruen">Test</a>

dann nimmt er nur die Definitionen, die ich für den body definiert habe, aber nicht das, was unter gruen steht.

developr · 16.06.2010

Bei mir funktioniert das.

HTML:

<html>
<head>
    <title>sdasds</title>
    <style>
        a:link, body a:visited {
        color:#000000;
        }
        a:hover {
        color:#c00000;
        }
        a:active {
        color:#c00000;
        }
        .gruen:link, gruen:visited {
        color: #008000;
        }
        .gruen:hover {
        color: #c00000;
        }
    </style>
</head>
<body>
Dies ist ein <a href="#">schwarzer Link</a> und das der <a href="#" class="gruen">grüne Link</a>.
</body>
</html>

MaWe · 16.06.2010

Stimmt.

Jetzt gehts bei mir auch, obwohl ich eigentlich nix geändert hab.......

Wahrscheinlich hab' ich vergessen zu speichern o.ä.

Vielen Dank jedenfalls. Jetzt funktioniert es.

Gruss
Martin