Problem mit Img als Hintergrund von Button - Hover
PatrickK
- css
- html
Hallo zusammen,
und zwar versuche ich gerade einen Button zu erstellen, der ein Bild als Hintergrund hat. Dazu benutze ich die Methode für den 1. Button aus folgendem Link: http://wiki.selfhtml.org/wiki/HTML/Formulare/Button#Buttons_mit_CSS_gestalten_-_contra
Das geht an sich auch gut und sieht dann so aus:
Sobald ich dann mit der Maus über den Button fahre, ändert sich das Grau zu Türkis (wie es auch bei den Buttons ohne Hintergrundbild ist).
Nun habe ich aber in meinem CSS einen Eintrag, der mir meine Links beim drüberfahren mit der Maus anders darstellt.
a:hover { Color: black; Background: green; }
Sobald ich dann über dem Bild im Button bin (also dem grünen Haken), wird der Button nicht mehr Türkis gefärbt. An allen anderen Stellen im Button ist er, wie gewollt, Türkis.
Wenn ich diesen Eintrag aus dem CSS-File lösche, funktioniert wieder alles wie gewünscht... Das ganze tritt bei mir beim IE 11 auf.
Hat denn jemand von euch eine Ahnung, woran das ganze liegen könnte?
Vielen Dank schonmal.
Mit freundlichen Grüßen Patrick
Kann den Beitrag leider nicht editieren, hier aber noch zwei JSFiddle dazu: Ohne Hover: https://jsfiddle.net/074mhev0/14/
Mit Hover: https://jsfiddle.net/6mhb8kv3/1/
Hallo qx,
vielen Dank schon mal für Deine Antwort. Also das Bild dann wie hier http://www.css4you.de/trickkiste/tr00018.html durchsichtiger machen? Auch wenn ich die Transparenz zu 0 setze, und man den Haken nicht mehr sieht, besteht mein Problem weiter... :/
Gruß Patrick
Hallo Patrick,
die Hintergrundfarbe der gif Grafik transparent machen, oder gleich ein grün gefärbtes utf8 Zeichen ✓ (✓) verwenden.
gr qx
Ein grün gefärbtes uft8 Zeichen geht leider nicht, da ich auch andere Grafiken als Hintergrund benötige wie den Haken...
Meinst du das transparent machen durch Background-Color: transparent; oder opacity: 0.X;?
https://jsfiddle.net/6mhb8kv3/19/
Habe beides probiert (auch einzeln), aber hat bei mir leider auch keine Wirkung... :/
@@PatrickK
Ein grün gefärbtes uft8 Zeichen geht leider nicht, da
… es keine „UTF-8-Zeichen“ gibt. UTF-8 ist kein Zeichensatz, sondern eine mögliche Zeichencodierung für den Unicode-Zeichensatz.
Meinst du das transparent machen durch Background-Color: transparent; oder opacity: 0.X;?
Weder noch. Sondern den Hintergrund deiner Grafik transparent machen – im Grafikprogramm deiner Wahl.
Statt GIF solltest du allerdings besser SVG verwenden …
LLAP
@@quincunx
die Hintergrundfarbe der gif Grafik transparent machen, oder gleich ein grün gefärbtes utf8 Zeichen ✓ (✓) verwenden.
Gleich SVG verwenden.
LLAP
Hallo PatrickK,
Kann ich im IE11 nicht nachvollziehen.
Das von dir beschriebene Verhalten käme imho aber auch nur bei folgendem Markup zustande:
<button>
<img src="..." alt=""> <a href="http://example.com">speichern</a>
</button>
Das ist jedoch wäre unsinniges HTML.
Bis demnächst
Matthias
@@Matthias Apsel
<button> <img src="..." alt=""> <a href="http://example.com">speichern</a> </button>
Das ist jedoch wäre unsinniges HTML.
Nicht nur unsinniges, sondern auch falsches. Link in Button ist nicht erlaubt: „Content model: Phrasing content, but there must be no interactive content descendant.“ [HTML 5.1]
Genauso wenig wie Button in Link.
LLAP
Hallo PatrickK,
Kann ich im IE11 nicht nachvollziehen.
Das von dir beschriebene Verhalten käme imho aber auch nur bei folgendem Markup zustande:
<button> <img src="..." alt=""> <a href="http://example.com">speichern</a> </button>
Das ist jedoch wäre unsinniges HTML.
Bis demnächst
Matthias--
> Signaturen sind bloed (Steel) und Markdown ist mächtig. Hallo Matthias, danke für deinen Beitrag. Wie man im Fiddle sieht, verwende ich natürlich nicht ein solches Markup. Es ist aber natürlich ärgerlich, dass du das Problem im IE11 nicht hast... Hat denn generell jemand anderes mein beschriebenes Problem im IE11? Schöne Grüße Patrick
Hallo Matthias,
danke für deinen Beitrag. Wie man im Fiddle sieht, verwende ich natürlich nicht ein solches Markup.
Es ist aber natürlich ärgerlich, dass du das Problem im IE11 nicht hast...
Hat denn generell jemand anderes mein beschriebenes Problem im IE11?
Schöne Grüße Patrick
Moin!
a:hover { Color: black; Background: green; }
Tut genau was es soll. Du hast den Link. Der wird grün. Nur siehst Du davon nichts, weil der Button - der ja gerade nicht grün werden soll - a) darüber und b) auch nicht durchsichtig ist.
Lösung:
Du willst nicht den Link, sondern den Button selektieren. Oder sogar den Button im Link:
a button:hover {
Color: black;
Background: green;
}
Jörg Reinholz
Hallo Jörg,
vielen Dank für Deine Antwort. Ich glaube, ich habe mein Problem nicht genau genug beschrieben.
Ich will, dass der Link im Hintergrund grün wird. Meinen Button will ich aber selber NICHT einfärben. Mein Internetexplorer färbt von alleine alle Buttons Türkis ein, wenn man drüber geht (siehe Bild im ersten Post). Chrome macht das z.B. nicht, was ich auch nicht schlimm finde.
Das Problem ist aber nun, dass der IE den Button einfärbt, solang ich über dem grauen Button-Bereich bin. Sobald ich dann mit der Maus über den grünen Haken komme, ist der Button aber nicht mehr eingefärbt. Das ist einfach ein unschönes Verhalten, da es dann nur drauf ankommt, an welcher Stelle ich innerhalb des Buttons bin, ob er eingefärbt ist. Das verwirrt m.Mn. nach eher die User...
Ist das Problem jetzt verständlich formuliert?
Schöne Grüße Patrick
Moin!
Ist das Problem jetzt verständlich formuliert?
Ah ja. Und ich habe eine Lösung: Nimm die Grafik in den Hintergrund und setze das Padding für den Text.
button {
margin: 0 2em;
padding: .2em .5em;
background-image: url('http://mental-point.eu/img/haken_gruen.gif');
background-repeat:no-repeat;
padding-left:2em;
}
Freilich muss Du dann auch den Rest des Buttons selbst komplett "stylen" oder damit leben, dass IE-Benutzer sich über etwas wundern, was denen woanders auch begegnet.
Jörg Reinholz
@@Jörg Reinholz
Du willst nicht den Link, sondern den Button selektieren. Oder sogar den Button im Link:
Nein, das gewiss nicht. Button im Link ist nicht erlaubt: „Content model: Transparent, but there must be no interactive content descendant.“ [HTML 5.1]
Genauso wenig wie Link in Button.
LLAP
@@Gunnar Bittersmann
Genauso wenig wie Link in Button.
Das wirklich Gute an der Editierfunktion ist ja, dass man sich jetzt im Kreis drehen kann. ;-)
LLAP