使用切換按鈕和子DIV修復鼠標懸停

Question

我有一個效果很好的切換腳本，但是我試圖添加鼠標懸停效果，但遇到了麻煩。

我有四個標簽，其中兩個是帶有背景色的簡單DIV，另外還有兩個帶有背景圖像的按鈕。

我為所有標簽創建了一個鼠標懸停效果，但是單擊按鈕時看起來不正確。 單擊按鈕后，該按鈕需要在單擊時更改背景位置，並且鼠標懸停在按鈕上。

這是我的鏈接： http : //jsfiddle.net/eriksnet/9cr4F/1/

謝謝。

Answer 1

這是因為#r6:hover .gnM的優先級高於.button-toogle-on 。 CSS具有CSS層次結構，基於CSS的定義位置（是否為內聯），指定的元素數量。 在這里閱讀更多。

無論如何，這可行：

#r6 #bxGender .button-toggle-on {
    background-position: 0 -120px
}

jsfiddle： http : //jsfiddle.net/9cr4F/3/