nicht angemeldet
Hover-Effekt: Rahmenfarbe ändern
Hallo Forum,
ich möchte mit einem Hover-Effekt bewirken, dass wenn man mit der Maus über einen Grafik-Link fährt, dieser die Rahmenfarbe ändert.
In Opera 7.54 und Mozilla 1.72 ist das auch ganz leicht möglich, indem man eine Pseudoklasse "bild:hover" für das betreffende Image-Element definiert. Allerdings streikt da der IE, der diese Pseudo-Klasse offensichtlich nur in Link-Elementen interpretiert. Weise ich die Klasse jedoch dem A-Element zu, das die Grafik umschließt, stellen sich Opera und Mozilla quer und legen mir den Rahmen nicht "um" die Grafik sondern nur im unteren Bereich teilweise "dahinter".
Das Thema gab es hier schon im Forum, zuletzt vor zwei Monaten:
http://forum.de.selfhtml.org/archiv/2004/10/t92429/#m557122
Allerdings werde ich aus dem Thread nicht so ganz schlau.
Deshalb meine Frage: Gibt es eine Möglichkeit, mein Vorhaben auch für den IE zu realisieren?
Ich habe es mit Conditional-Comment zwar schon geschafft;
http://www.sprachlernspiele.de/selftests/pichighlight.html
aber gibt es auch eine einfachere Lösung, die ohne Conditional-Comment für den IE auskommt?
Gruß Gernot
-
Hi,
aber gibt es auch eine einfachere Lösung, die ohne Conditional-Comment für den IE auskommt?
aber sicher doch:
a img { border:1px solid white; }
a:hover img { border-color: red; }Der IE hat den Bug, daß er bei deaktiviertem border für img keinen border mehr bei hover zeichnet.
freundliche Grüße
Ingo-
Hallo Ingo,
aber gibt es auch eine einfachere Lösung, die ohne Conditional-Comment für den IE auskommt?
aber sicher doch:a img { border:1px solid white; }
a:hover img { border-color: red; }Also bei mir tut sich da bei deiner Lösung im Internet-Explorer unter Win98 gar nichts, wohl aber in Opera und Mozilla. So etwas hatte ich auch schon probiert. Liegt's möglicherweise an der fehlenden DTD?
Schönen Gruß
Gernot
-
Hi,
Also bei mir tut sich da bei deiner Lösung im Internet-Explorer unter Win98 gar nichts
Welcher IE? mein IE6 wechselt hier brav die Rahmenfarbe.
freundliche Grüße
Ingo-
Hallo,
Also bei mir tut sich da bei deiner Lösung im Internet-Explorer unter Win98 gar nichts
Welcher IE? mein IE6 wechselt hier brav die Rahmenfarbe.Meine (auch) nicht. IE 6, XP SP2
Grüße
Thomas-
Hi,
Welcher IE? mein IE6 wechselt hier brav die Rahmenfarbe.
Meine (auch) nicht. IE 6, XP SP2
Vielleicht liegt's am Geschlecht? ;-)
Oder am SP2, das ich noch immer nicht installiert habe?freundliche Grüße
Ingo-
Hallo Ingo,
Hi,
Welcher IE? mein IE6 wechselt hier brav die Rahmenfarbe.
Ich habe auch mit IE6 getestet.
Meine (auch) nicht. IE 6, XP SP2
... unter Win 98, ...
Vielleicht liegt's am Geschlecht? ;-)
Oder am SP2, das ich noch immer nicht installiert habe?... gibts unter Win 98 SP2 und wenn ja was ist/bewirkt das?
Gruß Gernot
-
Hi,
... gibts unter Win 98 SP2 und wenn ja was ist/bewirkt das?
nein. Dieses berühmt-berüchtigte SP2 ist für XP.
freundliche Grüße
Ingo
-
-
-
-
-
-
Hallo Ingo,
aber gibt es auch eine einfachere Lösung, die ohne Conditional-Comment für den IE auskommt?
aber sicher doch:a img { border:1px solid white; }
a:hover img { border-color: red; }Dies funktioniert, wie bereits gesagt, wohl nicht in allen Browsern, aber es gibt doch eine Lösung ohne Conditional-Comment, die zumindest in den drei Browsern, mit denen ich unter Win98 getestet habe (MSIE 6, Opera 7.54, Mozilla 1.7.2) funktioniert:
a.rahmen {
background-image: url(down_normal.gif);
background-repeat: no-repeat;
background-position: center;
width: 52px;
height: 52px;
float:left;
border: solid 1px #0000FF;
}a.rahmen:hover {
border-color: #00FF00;
}Der Link sieht dann wie folgt aus:
<a href="#" class="rahmen"></a>
Jetzt wüsste ich ja nur noch gern, wieso Mozilla als einziger der getesteten Browser auch noch float:left benötigt, um den Grafik-Button überhaupt in voller Breite und Höhe anzuzeigen.
Ob das A-Element ohne Inhalt (ein steht auch nicht drin, sonst müsste ich auch noch text-decoration:none und font-size:1px; setzen) jetzt wirklich in allen Browsern angezeigt wird, können geneigte Leser nachfolgend ja mal testen und mir ggf. berichten, wenn es nicht der Fall sein sollte.
http://www.sprachlernspiele.de/selftests/pichighlight2.html
Gruß Gernot
-
Hi,
Jetzt wüsste ich ja nur noch gern, wieso Mozilla als einziger der getesteten Browser auch noch float:left benötigt, um den Grafik-Button überhaupt in voller Breite und Höhe anzuzeigen.
a ist per default ein (non-replaced) inline-Element. width und height sind für non-replaced inline-Elemente nicht definiert (http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width).
float zieht automatisch display:block nach sich (http://www.w3.org/TR/REC-CSS2/visuren.html#q24).
Damit ist das Element kein (non-replaced) inline-Element mehr, width und height sind damit definiert und werden ausgewertet.
Float ist nicht notwendig, display:block wäre ausreichend für die Auswertung von width und height.Wie so oft liegt der Mozilla also richtig, wenn er ohne float (also vor allem ohne display:block) die Breiten- und Höhenangaben nicht beachtet - da sie nicht beachtet werden dürfen.
Die anderen von Dir getesteten Browser interpretieren das CSS eindeutig falsch.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
a ist per default ein (non-replaced) inline-Element. width und height sind für non-replaced inline-Elemente nicht definiert (http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width).
float zieht automatisch display:block nach sich (http://www.w3.org/TR/REC-CSS2/visuren.html#q24).
Damit ist das Element kein (non-replaced) inline-Element mehr, width und height sind damit definiert und werden ausgewertet.
Float ist nicht notwendig, display:block wäre ausreichend für die Auswertung von width und height.Danke für den Hinweis, ich habe das CSS auf meiner Beispielseite entsprechend geändert.
Gruß Gernot
-
-
-