單選按鈕懸停時無法更改背景圖片

Question

我寫了一個帶有圖像動畫的無線電列表。當它被徘徊和檢查時，它可以更改爲其他圖像。 它適用於所有的瀏覽器，但在IE瀏覽器上懸停時無法使用。 我不知道我是否寫了一些錯誤的css或錯過了關於ie的問題？ 的HTML是：

<ul> 
<li> 
<input type="radio" id="f-option" name="gender"> 
<label for="f-option" class="gender female"><img src="images/52x42.png"></label> 
<div class="check"></div> 
</li> 
</ul> 

和我的CSS是：

.user-form ul li label.gender.female { 
background-image: url(../images/female.png); 
} 

.user-form input[type=radio]:checked ~ label.gender.female, 
.user-form input[type=radio]:hover ~ label.gender.female { 
background-image: url(../images/female-checked.png); 
} 

其作品所有的瀏覽器，但IE瀏覽器 不行有誰能夠幫我解決這個問題？

在線演示是在頁面的底部這樣： http://bestinthink.com/wg/buy-p1.html

Answer 1

嘗試以下。我正在使用.gender和.female標籤作爲兄弟姐妹之後直接訪問女性班。

.user-form ul li label.gender.female { 
background-image: url(../images/female.png); 
} 

.user-form input[type=radio]:checked ~ label .female, 
.user-form input[type=radio]:hover ~ label .female { 
background-image: url(../images/female-checked.png); 
} 

Answer 2

您的示例工作在現代瀏覽器，因爲他們把鼠標懸停在標籤元素，彷彿你徘徊在無線電元件本身，即使無線電元素設置爲visibility:hidden。 IE不會這樣。你必須明確地將鼠標懸停在收音機元素上，因爲你已經隱藏了收音機元素 - 以查看你的input[type=radio]:hover樣式。

我建議更改​​而不是input[type=radio]:hover的背景圖像。下面的代碼可能適合你。

.user-form input[type=radio]:checked ~ label.gender.female, 
.user-form label.gender.female:hover { 
    background-image: url(../images/female-checked.png); 
} 

使用它，讓我知道它是如何goes.☺

我會更新，如果我找到一個少哈克的解決方案。