img:hover Farbenprobleme

[Michel]

Moin,

ein kleiner grauer Rand soll beim Berühren mit der Maus um das Bild entstehen. Ich glaube, normalerweise muss man für sowas neben CSS auch JS bemühen. Beim Firefox reicht aber - zu meiner Verwunderung - das hier:

img:hover { border:1px solid; border-color: grey }

Meine Frage ist aber, warum das hier analog auch im Firefox nicht funktionier:

img:hover { border:1px solid; border-color: #3E3E3E }
                                              ^^^^^^^

Michel

[Cheatah]

Hi,

ein kleiner grauer Rand soll beim Berühren mit der Maus um das Bild entstehen. Ich glaube, normalerweise muss man für sowas neben CSS auch JS bemühen.

nein, die Pseudoklasse :hover ist seit 1998 für alle Elemente definiert.

Beim Firefox reicht aber - zu meiner Verwunderung - das hier:

Völlig normal bei allen modernen Browsern. Der IE fällt hier als einziger aus dem Rahmen.

Meine Frage ist aber, warum das hier analog auch im Firefox nicht funktionier:

Du musst noch irgend etwas anderes falsch gemacht haben.

Cheatah

[Michel]

Du musst noch irgend etwas anderes falsch gemacht haben.

Ja, davon gehe ich in solchen Fällen immer aus. Aber ich habe jetzt mindestens zehn Mal den direkten Vergleich durchgeführt, d.h. "grey" durch "#3E3E3E" ersetzt und sonst nichts in der Datei verändert und umgekehrt.

Vielleicht hat ja mal jmd. Lust das selbst auszuprobieren und mir danach Auskunft zu erteilen.

Michel

[Cheatah]

Hi,

Ja, davon gehe ich in solchen Fällen immer aus. Aber ich habe jetzt mindestens zehn Mal den direkten Vergleich durchgeführt, d.h. "grey" durch "#3E3E3E" ersetzt und sonst nichts in der Datei verändert und umgekehrt.

mit welchem Erfolg? Was veranlasst Dich zu der Annahme, die Angabe "grey" würde an der Stelle akzeptiert werden?

Cheatah

[Michel]

mit welchem Erfolg? Was veranlasst Dich zu der Annahme, die Angabe "grey" würde an der Stelle akzeptiert werden?

Wie jetzt? Mit "grey" funktioniert es ja. Oder was meinst du?

Michel

[Cheatah]

Hi,

mit welchem Erfolg? Was veranlasst Dich zu der Annahme, die Angabe "grey" würde an der Stelle akzeptiert werden?
Wie jetzt? Mit "grey" funktioniert es ja.

bist Du sicher, dass dies an der von Dir genannten CSS-Regel liegt?

Cheatah

[Michel]

Hilfe, ich bin so dumm! Tötet mich.

"#3E3E3E" ist auch gleichzeitig die Hintergrundfarbe meiner Seite (im Gegensatz zu grey), sodass sich der Rahmen überhaupt nicht abheben konnte. Krass, dass ich mich mit diesem DAU-Problem zwei Stunden lang beschäftigt habe und das Forum auch noch dafür missbraucht habe.

Danke für eure Antworten, Cheatah und Tobias. Man, tut mir echt leid, dass ich euch mit meiner grenzenlosen Ignoranz die Zeit gestohlen habe.

Michel

[Cheatah]

Hi,

Hilfe, ich bin so dumm! Tötet mich.

[...]

Man, tut mir echt leid, dass ich euch mit meiner grenzenlosen Ignoranz die Zeit gestohlen habe.

ruhig, Brauner. Durch Fehler (seien es die eigenen oder die anderer) lernt man am besten - und genau das ist das Ziel der meisten hier. Ich bin sicher, Du hast heute ziemlich viel gelernt ;-)

Cheatah

[Tobias Kloth]

Hallo Michel,

ein kleiner grauer Rand soll beim Berühren mit der Maus um das Bild entstehen. Ich glaube, normalerweise muss man für sowas neben CSS auch JS bemühen. Beim Firefox reicht aber - zu meiner Verwunderung -

warum Verwunderung? :hover ist schon seit über 6 Jahren für alle (sichtbaren) Elemente definiert ...

Meine Frage ist aber, warum das hier analog auch im Firefox nicht funktionier:
  img:hover { border:1px solid; border-color: #3E3E3E }

bei mir funktioniert sowohl »grey« als auch »#3E3E3E« als Farbangabe - hast du eine Testseite die man sich mal anschauen kann? btw: warum hast du ein extra »border-color«? schreib doch die Farbe hinter »solid« bei »border« mit rein.

Grüße aus Nürnberg
Tobias

[MudGuard]

Hi,

ein kleiner grauer Rand soll beim Berühren mit der Maus um das Bild entstehen. Ich glaube, normalerweise muss man für sowas neben CSS auch JS bemühen. Beim Firefox reicht aber - zu meiner Verwunderung - das hier:
  img:hover { border:1px solid; border-color: grey }

Erstaunlich. grey ist im Gegensatz zu gray nämlich kein zulässiger Wert für eine Farbe in CSS 2 bzw. 2.1

Erst in CSS 3 Color Module gibt es gray und grey.
Kurzer Test: einige andere der in CSS 3 neuen Farbnamen (http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color) funktionieren tatsächlich auch.

Schön. Und kommt sogar noch schöner: Opera und IE scheinen die Farbnamen auch zu unterstützen - sieht man beim Vergleich der ersten beiden Spalten der Tabelle, bei der ersten Spalte wurde der Name, bei der zweiten der Hexwert benutzt. Der IE macht nur Ausnahmen für die gr_e_y-Varianten, die erkennt er nicht ...
Also sind alle bis auf die grey-Varianten, die man durch gray-Varianten ersetzen kann, nutzbar.

Da kann man ja Seiten mit salmon-farbiger Schrift auf thistle-Hintergrund machen (für die Hover-Effekte dann darksalmon und mediumorchid) ;-)

cu,
Andreas

[Gernot Back]

Hallo Michel,

ein kleiner grauer Rand soll beim Berühren mit der Maus um das Bild entstehen. Ich glaube, normalerweise muss man für sowas neben CSS auch JS bemühen. Beim Firefox reicht aber - zu meiner Verwunderung - das hier:

img:hover { border:1px solid; border-color: grey }

Abgesehen von dem, was man dir bereits zu "grey" (B.E.) und "gray" (A.E.) gesagt hat (im Webdesign sind immer amerikanische statt bitischer Schreibweisen angesagt, vgl. "colour" und "color"), vielleicht hilft dir mein Posting von gestern, das Ändern der Rahmenfarbe über CSS-Hover (ganz ohne JS) auch für den IE zu bewirken.

Gruß Gernot