2013-02-08 151 views
3

我觀察到一個很奇怪的問題,我不能完全理解這個理由。因此,我想請你們解釋一下,當我用jQuery改變它的背景顏色時,我在按鈕上鬆開了默認的CSS爲什麼當改變按鈕的背景色時,默認的CSS會丟失?

這是demonstrated in the jsfiddle(在FFChrome上測試)。如果你將鼠標放在按鈕上,它將失去它的風格,例如沒有四捨五入的邊界,這不是預期會發生的事情。 你能解釋一下爲什麼會這樣嗎?你還會建議什麼解決方法來保留默認的「CSS」設置?

回答

1

如果你在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); 
}) 
+0

感謝您的(+1)。我自己也嘗試過。雖然這對於我將使用我的樣式的最終產品來說已經足夠了,但在這個問題中,我想知道如何保留默認值**。 – Boro 2013-02-08 14:32:59

+0

據我所知,您不能將其恢復爲默認設置,因爲瀏覽器會根據每個瀏覽器呈現處於默認狀態的按鈕。據我所知,我認爲我的解決方案是最好的方法。 – 2013-02-08 14:36:32

+1

謝謝大家的答案。我接受比利的答案,因爲它是先發布的,他還展示了代碼示例。歡呼一切。 – Boro 2013-02-08 14:50:10

1

有很快你啓動一個風格化表單元素,即。一個<按鈕,特別是背景色或邊框,瀏覽器重新渲染元素。然後,它會顯示您的具體.css文件,並且您放棄了'瀏覽器+軟件+ o.s'。具體造型。

styling form controls introductionstyling form controls in details

+0

+1感謝您的鏈接。有趣的閱​​讀。我從他們和你的回答中看到,唯一的選擇似乎忘記了默認設置,只是總是玩你自己的CSS。 – Boro 2013-02-08 14:43:32

1

我相信在頁面上默認的按鈕是一個系統生成的按鈕(即Windows)中。更改任何視覺上影響的樣式將導致您的瀏覽器呈現按鈕,刪除某些樣式。一旦你到達這裏,現在回來了。最好的做法是將樣式按鈕看起來非常相似,然後您可以修改個別樣式而不會丟失其餘樣式。類似的答案在這裏:Chrome default button style。我會看看我能否找到關於此事的更多信息。

編輯:

此頁面上的第二個答案似乎備份我的想法,但仍然沒有參考:https://stackoverflow.com/a/10265336/719718

+0

謝謝(+1)。是的,我已經採取了另一種眼神,是的,它一定是這個想法按鈕在不同的瀏覽器,他們是系統(在我的情況下Win)按鈕略有不同。 – Boro 2013-02-08 14:41:24

相關問題