PatrickK: Problem mit Img als Hintergrund von Button - Hover

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: Alternativ-Text

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).

Alternativ-Text

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

  1. 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/

    1. https://jsfiddle.net/6mhb8kv3/1/

      die Grafik im Button ist hier nicht transparent

      gr qx

      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

        1. Hallo Patrick,

          transparentes Image die Hintergrundfarbe der gif Grafik transparent machen, oder gleich ein grün gefärbtes utf8 Zeichen ✓ (✓) verwenden.

          gr qx

          1. 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... :/

            1. @@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

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. @@quincunx

            transparentes Image die Hintergrundfarbe der gif Grafik transparent machen, oder gleich ein grün gefärbtes utf8 Zeichen ✓ (✓) verwenden.

            1. Sachen gibt’s, die gibt’s gar nicht

            2. Gleich SVG verwenden.

            LLAP

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Hallo PatrickK,

      https://jsfiddle.net/6mhb8kv3/1/

      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.
      1. @@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

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hallo PatrickK,

        https://jsfiddle.net/6mhb8kv3/1/

        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

  2. 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

    1. 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

      1. 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

    2. @@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

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@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

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)