hovered button-element verliert Style nach Änderung der Hintergrundfarbe

Question

Dies ist eine CSS-Frage. In this fiddle können Sie eine Schaltfläche sehen. Es hat zwei Spannelemente im Inneren. Eine mit float:left; die andere mit float:right;.

Der Stil ist ein normaler Button-Stil. Wenn Sie diese Schaltfläche auf dem iPhone anklicken oder in einem Browser schweben, geht der Stil verloren. Das liegt daran, dass ich die Hintergrundfarbe geändert habe.

Gibt es eine Möglichkeit, die Hintergrundfarbe zu ändern, ohne den gesamten Button-Stil zu verlieren?

EDIT: Hier sind die zwei Bilder: Die erste Schaltfläche ist ein normales Button-Element. Der zweite Knopf ist ein Knopf, wo ich die Hintergrundfarbe ändere ... so sieht es aus, wenn ich über einen Knopf schwebe.

Answer 1

Ich denke, ich verstehe, was du meinst. Es sieht so aus, als ob die abgerundete Ecke beim Schweben weg ist, während ein Rahmen hinzugefügt wird. Ich fürchte, es gibt keinen einfachen Weg, um genau das zu erreichen, was Sie wollen, da das Verhalten & Aussehen von Button vom System gesteuert wird.

Vielleicht können Sie versuchen, es durch ein div zu ersetzen, das Sie die volle Kontrolle über den Stil haben (den Stil über JS beim Schweben chasing).

Answer 2

Alles funktioniert gut für mich. Hingegen sollten Elemente mit schwebendem Recht immer vor links schwebenden Elementen platziert werden. Ich weiß nicht, ob es etwas ändern wird.