为什么当改变按钮的背景色时，默认的CSS会丢失？

我观察到一个很奇怪的问题，我不能完全理解这个理由。因此，我想请你们解释一下，当我用jQuery改变它的背景颜色时，我在按钮上松开了默认的CSS。为什么当改变按钮的背景色时，默认的CSS会丢失？

这是demonstrated in the jsfiddle（在FF和Chrome上测试）。如果你将鼠标放在按钮上，它将失去它的风格，例如没有四舍五入的边界，这不是预期会发生的事情。 你能解释一下为什么会这样吗？你还会建议什么解决方法来保留默认的“CSS”设置？

来源

2013-02-08 Boro

如果你在css中设置按钮的背景颜色开始，然后将它动画回到你的jQuery中的颜色，这将做的伎俩。

http://jsfiddle.net/899Wn/8/

button { 
    background: blue; 
} 


$("#nav ul li button").hover(function() { 
    $(this).stop().animate({ 
     backgroundColor: '#E5E5E5' 
    }, 500); 
}, function() { 
    $(this).stop().animate({ 
     backgroundColor: 'blue' 
    }, 500); 
})

来源

2013-02-08 14:29:11

感谢您的（+1）。我自己也尝试过。虽然这对于我将使用我的样式的最终产品来说已经足够了，但在这个问题中，我想知道如何保留默认值**。 – Boro 2013-02-08 14:32:59

据我所知，您不能将其恢复为默认设置，因为浏览器会根据每个浏览器呈现处于默认状态的按钮。据我所知，我认为我的解决方案是最好的方法。 – 2013-02-08 14:36:32

谢谢大家的答案。我接受比利的答案，因为它是先发布的，他还展示了代码示例。欢呼一切。 – Boro 2013-02-08 14:50:10

有很快你启动一个风格化表单元素，即。一个<按钮，特别是背景色或边框，浏览器重新渲染元素。然后，它会显示您的具体.css文件，并且您放弃了'浏览器+软件+ o.s'。具体造型。

styling form controls introduction和styling form controls in details

来源

2013-02-08 14:30:45

+1感谢您的链接。有趣的阅读。我从他们和你的回答中看到，唯一的选择似乎忘记了默认设置，只是总是玩你自己的CSS。 – Boro 2013-02-08 14:43:32

我相信在页面上默认的按钮是一个系统生成的按钮（即Windows）中。更改任何视觉上影响的样式将导致您的浏览器呈现按钮，删除某些样式。一旦你到达这里，现在回来了。最好的做法是将样式按钮看起来非常相似，然后您可以修改个别样式而不会丢失其余样式。类似的答案在这里：Chrome default button style。我会看看我能否找到关于此事的更多信息。

编辑：

此页面上的第二个答案似乎备份我的想法，但仍然没有参考：https://stackoverflow.com/a/10265336/719718

来源

2013-02-08 14:34:48 Chris

谢谢（+1）。是的，我已经采取了另一种眼神，是的，它一定是这个想法按钮在不同的浏览器，他们是系统（在我的情况下Win）按钮略有不同。 – Boro 2013-02-08 14:41:24

为什么当改变按钮的背景色时，默认的CSS会丢失？

回答

相关问题