Hover

MaWe · 16.06.2010, 08:21

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-Code:

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, 09:42

Du kannst deinem Link eine Class zuweisen.

HTML-Code:

<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, 10:39

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-Code:

<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, 17:42

Bei mir funktioniert das.

HTML-Code:

<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, 18:24

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

16.06.2010, 08:21	#1
MaWe Neuer Benutzer Registriert seit: 16.06.2010 Ort: München Beiträge: 17	Hover 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-Code: 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

16.06.2010, 09:42	#2
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 260	AW: Hover Du kannst deinem Link eine Class zuweisen. HTML-Code: <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 ;-).

16.06.2010, 10:39	#3
MaWe Neuer Benutzer Registriert seit: 16.06.2010 Ort: München Beiträge: 17	AW: Hover 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-Code: <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.

16.06.2010, 18:24	#5
MaWe Neuer Benutzer Registriert seit: 16.06.2010 Ort: München Beiträge: 17	AW: Hover 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

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche