點擊後，css懸停狀態變爲非活動狀態

在此fiddle上，單擊其中一個框後，懸停狀態變爲非活動狀態，並且不再顯示。點擊後，css懸停狀態變爲非活動狀態

我有三個背景設置使用css background-image。我使用jQuery來附加一個點擊事件。你能幫我確定爲什麼懸停狀態停止工作嗎？

謝謝。

'爲什麼我的懸停狀態在我點擊其中一個圖像後處於非活動狀態>>爲什麼你對同一元素有兩個點擊事件 – bipen

懸停時沒有任何反應會被推翻。你什麼意思？ –

@bipen我不知道如何合併這兩個點擊事件 – user2432458

因爲li的內聯樣式會覆蓋您的css：hover選擇器屬性。使用!important，使其工作：

li#one:hover{ 
    background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important; 
}

2013-05-29 13:08:42 Michael

它沒有工作。點擊狀態僅在鼠標懸停時顯示。它應該在我們點擊圖片後顯示。任何想法？謝謝。 – user2432458

這是因爲您使用圖像，在懸停和活動狀態下使用文本並將屬性更改爲顏色和邊距。這樣會更好。 – Michael

當jQuery的更改背景圖片，它這樣做inline，在它修改實際的HTML。這意味着新的背景圖像比在#one:hover中設置的更多specific，因此它不能覆蓋它。

您需要在:hover上的每個新背景圖像之後添加!important以確保它具有覆蓋它的特殊性。

2013-05-29 13:08:42 Andy

這就是爲什麼不直接設置CSS值更聰明，而是使用類或類似的代替。也有助於分離邏輯和格式。 – CBroe

@andy每個圖像中都有3個條件。空閒，懸停和點擊。當我們添加！對CSS很重要時，點擊狀態僅在鼠標懸停時顯示。我希望它在我們點擊圖片後立即顯示。任何其他想法來解決這個問題？謝謝你的方式 – user2432458

@ user2432458那麼我會建議的是，而不是每次更改元素的圖像，只需添加和刪除類''.clicked'具有'background-image：url（）' – Andy

，你是越來越是因爲你被設置與使用jQuery CSS屬性背景內嵌的問題，我已經解決了你的問題的演示。

我刪除的代碼將其插入背景的一部分，而只是增加了一個.active類代碼，所以當元素，在用戶點擊，我設置類的元素。我希望你喜歡！

2013-05-29 13:13:08

@ Wallysson努涅斯。感謝你的回答。我如何顯示點擊狀態圖像？這個數字應該在我們點擊後的底部。 – user2432458

這是沒有問題的，我已經改變了代碼，這裏是新的例子：http://jsfiddle.net/J3x7M/5/ 我做的基本事情是將新的類的.active類拆分爲所需的圖像，這是底部編號。希望有所幫助... :) –

@ Wallysson Nunes。謝謝你nunes！多麼偉大和簡單的腳本。 – user2432458

回答