悬停的按钮元素在更改背景颜色后失去样式 [英] hovered button-element loses style after changing background-color

问题描述

这是一个CSS问题.在此小提琴中，您可以看到一个按钮.它内部有两个span元素.一个带有 float:left; .另一个带有 float:right; .

This is a CSS-Question. In this fiddle you can see a button. It has got two span-elements inside. One with float:left; the other with float:right;.

样式是普通的按钮样式.在iPhone上单击该按钮或将其悬停在浏览器中时，样式会丢失.这是因为我更改了背景颜色.

The style is a normal button-style. When clicking that button on the iPhone or hover it in a Browser the style gets lost. This is because I changed the background-color.

有没有办法改变背景颜色而不丢失整个按钮样式?

Is there a way to change the background-color without losing the whole button-style?

这是两个图像:第一个按钮是普通的按钮元素.第二个按钮是一个按钮，我在其中更改了背景色……这就是我将鼠标悬停在按钮上时的样子.

Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.

推荐答案

我想我理解你的意思.悬停时似乎圆角消失了，同时添加了边框.恐怕没有一种简单的方法来获得您真正想要的东西，因为行为和Button的外观由系统控制.

I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.

也许您可以尝试用div替换它，您可以完全控制样式(在悬停时通过JS更改样式).

Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).

这篇关于悬停的按钮元素在更改背景颜色后失去样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！