HTML

css mehrere hover definitionen?

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

hallo, nur mal ne kurze frage... wenn ich mittels css auf meiner seite hover und ähnliches für meine mouseovers definiere, weiss da jemand ne möglichkeit, wie man verschiedene hover definieren kann? also beispielsweise soo der eine link beim drüberfahren grün und der andere rot werden. habe ich bis gerade eben noch nie gebraucht, aber mir fällt daszu irgendwie keine Lösung ein... Euch? danke maschka

Antwort 1 von m-a-d

Hallo maschka

Mach mal einen Rechtsklick auf eine Supportnetseite und las dir den Quelltext anzeigen ;-).

NDT

m-a-d

Antwort 2 von Friedel

Das kannst du mit unterschiedlichen Klassen machen. Beispiel:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
<!--
a.abc:link   { color: black; text-decoration: none; font-weight: bold }
a.abc:visited { color: DarkBlue; text-decoration: none; font-weight: bold }
a.abc:hover  { color: #EEff00; text-decoration: none; background-color: #FF0000 }
a.abc:active { color: DarkBlue; background-color: #FFFF99; font-weight: bold }
a.bcd:link   { color: black; text-decoration: none; font-weight: bold }
a.bcd:visited { color: DarkBlue; text-decoration: none; font-weight: bold }
a.bcd:hover  { color: #EE00ff; text-decoration: none; background-color: #00FF99 }
a.bcd:active { color: #0000EE; background-color: #FFFF99; font-weight: bold }
a.cde:link   { color: black; text-decoration: none; font-weight: bold }
a.cde:visited { color: DarkBlue; text-decoration: none; font-weight: bold }
a.cde:hover  { color: #EE0000; text-decoration: none; background-color: #FFFF99 }
a.cde:active { color: #0000EE; background-color: #FFFF99; font-weight: bold }
a.def:link   { color: black; text-decoration: none; font-weight: bold }
a.def:visited { color: DarkBlue; text-decoration: none; font-weight: bold }
a.def:hover  { color: #EE00ff; text-decoration: none; background-color: #FFFF99 }
a.def:active { color: #0000EE; background-color: #FFFF99; font-weight: bold }
a.efg:link   { color: black; text-decoration: none; font-weight: bold }
a.efg:visited { color: DarkBlue; text-decoration: none; font-weight: bold }
a.efg:hover  { color: #EEffff; background-color: #FFFF99; font-weight: bold }
a.efg:active { color: #0000EE; background-color: #FFFF99; font-weight: bold }
-->
</style>
</head>
<body>
<p><a href="http://www.friedels-home.com/" class="abc">Friedels Homepage</a></p>
<p><a href="http://www.friedels-home.com/" class="bcd">Friedels Homepage</a></p>
<p><a href="http://www.friedels-home.com/" class="cde">Friedels Homepage</a></p>
<p><a href="http://www.friedels-home.com/" class="def">Friedels Homepage</a></p>
<p><a href="http://www.friedels-home.com/" class="efg">Friedels Homepage</a></p>
</body>
</html>

Antwort 3 von Dr.Ma-Busen

Hallo maschka,

also wenn ich dich richtig verstanden habe dann möchtest du für diverse links verschiedene Hover effekte haben, richtig?

Also das ganze geht hier mit:


a:link {  color:#0000E0; }
a:visited {  color:#000080;  }
a:hover {  color:#E0ff00;  }
a:active {  color:#E00000;  }
a:focus { color:#00E000;  }

Wenn du jetzt aber einen Link mit einer anderen Hover Farbe haben möchtest dann kopierst du das ganze einfach und ersetzt das a von a:link und a:hover usw. durch einen belibigen Namen der mit einen Punk "." begint. Und den entsprechenden link erweiterst du dann mit class="DenNameAberOhnePunk" und das wars dann.
Hier noch ein kleines Beispiel zum besseren verständniss:


<body>
<style type="text/css">
<!--
.linkA:link {  color:#0000E0; }
.linkA:visited {  color:#000080;  }
.linkA:hover {  color:#E00000;  }
.linkA:active {  color:#E00000;  }
.linkA:focus { color:#00E000;  }

-->
</style>
<a href="#" class="linkA">Link A</a><br>
</body>

MfG
Dr. Ma-Busen

Antwort 4 von maschka

was wäre ich ohne euch, ich danke euch für eure schnelle und vor allem nutzbringende hilfe, ich hoffe, ich kann das mal zurückzahlen...
aber ich glaub es gibt kaum etwas, was ihr gurus nicht wisst. oder?

danke
maschka