nicht angemeldet
Mehr als eine :hover classe für IE in einer HTML-Seite?
Ich habe eine HTML-Seite und eine dazugehörige StyleSheetDefinition.
Ich habe dort im groben, 6 verschiedene Klassen und mächte jeder
Klasse eine andere Farbe bei :hover zuweisen.
Folgendes funktioniert leider nicht:
.submenu01 {color:#FFFFFF;}
.submenu01:hover {color:#FF6500}
Hab ihr eine Idee wie es geht?
Ich weiss auch das es unter Netscape keine hover Klasse gibt.
Thanks a lot
md
-
hi
ich glaub man braucht das a wieder dazu
a.submenu01:hover {color:#FF6500}greetings
FICHTL-
Hallo Markus und Fichtl,
ich glaub man braucht das a wieder dazu
a.submenu01:hover {color:#FF6500}genau so sollte es gehen.
W3 schreibt unter http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements:
"Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only appear after the subject of the selector. "a.submenu01:hover{...} ist also korrekt, den :hover ist eine Klasse, kein Element. Der IE 5 interpretiert es allerdings nicht korrekt. Ob der IE5.5 da besser ist, kann ich nicht sagen.
Viele Gruesse
Kess-
hallo Kess
h1 a.rot:link {
color:red;
font-family: arial;
text-decoration: underline;
}<h1><a href="test.htm" class=rot>nur ein test</a></h1>
das funktioniert im 5.5 und imho wenn das geht, geht alles
ander auch.liebe grüße
FICHTL -
Moin
a.submenu01:hover{...} ist also korrekt, den :hover ist eine Klasse, kein Element.
Kleine, hoffentlich nicht zu korinthenhafte Ergänzung :-) :hover ist keine Klasse, sondern eine (dynamische) Pseudo-Klasse http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
Viele Grüße
Swen
-
Hallo Kess!
Hier die Pseudoklassen der Atomic Eggs-CSS (haben beim 4er, beim 5er funktioniert und tun's auch beim 5.5er):
a:link { font-family:Verdana ; color:#01D5DB ; text-decoration:none ; }
a:visited { color:#01D5DB ; text-decoration:none ; }
a:hover { color:#FFBF00; }
a:active { color:#FF0000 ; font-style:italic ; }
a.bluefogb:link { font-family:Verdana ; color:#0000c0 ; text-decoration:underline ; }
a.bluefogb:visited { font-family:Verdana ; color:#0000c0 ; text-decoration:underline ; }
a.bluefogb:hover { font-family:Verdana ; color:#ff0000 ; text-decoration:underline ; }
a.bluefogb:active { font-family:Verdana ;color:#ff0000 ; text-decoration:underline ; font-style:italic ; }
a.forum:link { font-family:Verdana ; color:#01D5DB ; text-decoration:none ; font-size:15px; }
a.forum:visited { color:#FFBF00 ; text-decoration:none ; font-size:15px; }
a.forum:hover { color:#FFBF00; text-decoration:none ; font-size:15px; }
a.forum:active { color:#FF0000 ; font-style:italic ; font-size:15px; }Bis danndann
PAF (patrickausfrankfurt)<img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view
-
Hallo Paf
Hier die Pseudoklassen der Atomic Eggs-CSS (haben beim 4er, beim 5er funktioniert und tun's auch beim 5.5er):
Wo setzt du das ein?
Ich habe es lokal getestet, da geht es nicht :-(Viele Gruesse
Kess-
Hallo Kess!
Ich habe es lokal getestet, da geht es nicht :-(
Hmmh... *Was* geht nicht (hover? active? visited?...)?
Auf die Reihenfolge: link, visited, hover, active kommt es an (also nicht, dass du da stehen hast: link, visited, active, hover, da gibt's Probs) - warum das so ist, kann Dir unser Experte Thomas JS sicherlich besser erklären als ich :-)
Wo setzt du das ein?
Also, das hier:
a:link { font-family:Verdana ; color:#01D5DB ; text-decoration:none ; }
a:visited { color:#01D5DB ; text-decoration:none ; }
a:hover { color:#FFBF00; }
a:active { color:#FF0000 ; font-style:italic ; }ist für die "normalen", also für fast alle Seiten von Atomic Eggs zuständig (Beispiel: http://www.atomic-eggs.com/windows/fehler.html).
Link ist beim Laden blau (#01d5db), beim drüberfahren okergelb (#ffbf00), beim klicken rotkursiv (IE). Besuchte Links behalten ihre Farbe: blau (#01d5db).
Das folgende:
a.forum:link { font-family:Verdana ; color:#01D5DB ; text-decoration:none ; font-size:15px; }
a.forum:visited { color:#FFBF00 ; text-decoration:none ; font-size:15px; }
a.forum:hover { color:#FFBF00; text-decoration:none ; font-size:15px; }
a.forum:active { color:#FF0000 ; font-style:italic ; font-size:15px; }wird nur für die Links zu den Messages des AE-Forums benutzt: Hier habe ich die Schrift kleiner gewählt, damit mehr reinpasst, und man soll auch sehen können, was man bereits gelesen hat. Daher is unter visited jetzt gelb.
Und zuletzt das hier (ich musste hier selber suchen, wo ich das einsetze *gg*):
a.bluefogb:link { font-family:Verdana ; color:#0000c0 ; text-decoration:underline ; }
a.bluefogb:visited { font-family:Verdana ; color:#0000c0 ; text-decoration:underline ; }
a.bluefogb:hover { font-family:Verdana ; color:#ff0000 ; text-decoration:underline ; }
a.bluefogb:active { font-family:Verdana ;color:#ff0000 ; text-decoration:underline ; font-style:italic ; }kommt nur in den Messages des AE-Forums vor (Beispiel: http://www.atomic-eggs.com/forum/messages/237.html): Hier sollten die mailto-Links der Poster und deren URL in den Tabellen erkennbar als Link gekennzeichnet werden, daher "underline".
Bis danndann
PAF (patrickausfrankfurt)<img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view
-
Hallo PaF
Auf die Reihenfolge: link, visited, hover, active kommt es an (also nicht, dass du da stehen hast: link, visited, active, hover, da gibt's Probs) - warum das so ist, kann Dir unser Experte Thomas JS sicherlich besser erklären als ich :-)
Dass ich :link und :visited angeben muss, wenn mich nur :hoover interessiert, will mir irgendwie nicht einleuchten. Thomas, wie waere es an dieser Stelle mit deiner Erklaerung bitte?
Viele Gruesse
Kess-
Hallo Kess!
Dass ich :link und :visited angeben muss, wenn mich nur :hoover interessiert, will mir irgendwie nicht einleuchten. Thomas, wie waere es an dieser Stelle mit deiner Erklaerung bitte?
Mal davon abgesehen, daß es für den IE reicht wenn du a:hover und sondt gar nichts angibst (ich habe es getestet; es geht. Also muss bei dir was scheifgegangen sein), ist es einfach mir der Reihenfolge: man muss sich nur überlegen in welcher Reihenfolge ein Link "passiert".
Grüße
Thomas-
Hallo Thomas,
Mal davon abgesehen, daß es für den IE reicht wenn du a:hover und sondt gar nichts angibst (ich habe es getestet; es geht. Also muss bei dir was scheifgegangen sein), ist es einfach mir der Reihenfolge: man muss sich nur überlegen in welcher Reihenfolge ein Link "passiert".
Missverstaendnis! Es geht nicht um a:hoover, sondern um a.irgendwas:hoover.
Ersteres ist kein Problem. Letzteres will bei mit nicht funktionieren.Viele Gruesse
Kess <die es einfach nur genau wissen will>-
Hallo Kess!
Missverstaendnis! Es geht nicht um a:hoover, sondern um a.irgendwas:hoover.
Ersteres ist kein Problem. Letzteres will bei mit nicht funktionieren.Sag mal...
hast Du die ganze Zeit "hoover" drin stehen ? :-)
Hoover ist ein Staubsauger aus England...Richtig ist "hover", nur mit einem "o"!
Dann dürfte es mit dem Nachbarn, ääh, mit a.irgendwas:hover funktionieren!
Bis danndann
PAF (patrickausfrankfurt)<img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view
-
Hallo PaF,
Sag mal...
hast Du die ganze Zeit "hoover" drin stehen ? :-)
Hoover ist ein Staubsauger aus England...Richtig ist "hover", nur mit einem "o"!
*Luft hole zum Widerspruch, aber dann doch besser noch mal nachsehe .....* öhm ... *knallrote Birne ...kommentarloser Abgang*
Lacht nicht so laut! ;-)
Viele Gruesse
Kess
-
-
Hallo Kess!
Missverstaendnis! Es geht nicht um a:hoover, sondern um a.irgendwas:hoover.
Ersteres ist kein Problem. Letzteres will bei mit nicht funktionieren.<html>
<head>
<title>Test 4</title>
<style type="text/css">
a.irgendwas:hover { color:maroon; text-decoration:none; font-weight:900; }
</style>
</head>
<body>
<a class="irgendwas" href="test_c.html">Test 1</a><br><br>
<a class="irgendwas" href="test_b.html">Test 2</a>
</body>
</html>Es geht.
Zu der Reihenfolge:
Zustand 1: link UND visited :der Link ist nur "da"; was in beiden Fällen zutrifft, sowohl bei unbesuchten wie bei besuchten Links. Denn Zustand 2 und 3 wiederholen sich bei unbesuchten und bei besuchten LinksZustand 2: hover : man fährt mit der Maus über den Link
Zustand 3: aktive : man ist schon über den Link mit der Maus gefahren und nun klickt man den Link an (undwenn man die Maustaste nicht los läßt kann man auch die für aktive definierte CSS sehen)
Grüße
Thomas
-
-
-
-
-
-
-
-
-
So geht es ganz einfach. Du willst ja, dass die Links nur beim Hovern verschieden Farben aufweisen, sonst sind sie immer gleich.
<style>
a.link{color:#000000;) -> Format für ALLE Links,
a.active(color:#000000;) egal welche Klasse
a.visited(color:#000000;)
a.submenu01(color:#FF0000;) -> Format nur beim Hovern
a.submenu02(color:#00FF00;)
.
.
.
.
</style>Bei den Links definierst Du immer die entsprechende Klasse.
Gruß, Jan
-
Hallo Jan!
<style>
a.link{color:#000000;) -> Format für ALLE Links,
a.active(color:#000000;) egal welche Klasse
a.visited(color:#000000;)
a.submenu01(color:#FF0000;) -> Format nur beim Hovern
a.submenu02(color:#00FF00;)
.Das ist leider alles falsch!
Wie es richtig gemacht wird, kannst du im Patricks Posting nachlesen.
Grüße
Thomas-
Hallo Thomas!
Wie es richtig gemacht wird, kannst du im Patricks Posting nachlesen.
Habe ich ja auch alles von Dir gelernt :-)
Naja, wenigstens was die Reihenfolge angeht (habe mich früher immer vertan!)
Bis danndann
PAF (patrickausfrankfurt)<img src="/selfaktuell/extras/selfcomm.jpg" alt=""> http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view
-
-
-
Nochmals thanks a lot...!
Es funktioniert dank Eurer Hilfe inzwischen!
md