選中時單選按鈕變化圖像

我想要發生的情況是隻有要顯示的圖像和這些圖像是無線電按鈕，每當我選擇或執行選中時我想更改它的圖像。選中時單選按鈕變化圖像

是這樣的：

這裏是我到目前爲止的代碼。

.button input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.button input[type=radio]:checked + label>img { 
 
    background:url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png") no-repeat; 
 
} 
 

 
.button input[type=radio]:hover + label>img { 
 
     -webkit-transform: scale(1.3); 
 
     -ms-transform: scale(1.3); 
 
     transform: scale(1.3); 
 
}

<div class="button"> 
 
<input type="radio" id="but1" name="sel_button" /> 
 
<label for="close"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png" alt="close_icon"/> </label> 
 

 
<input type="radio" id="but2" name="sel_button" /> 
 
<label for="bulb"> <img src="https://image.flaticon.com/icons/png/128/117/117944.png" alt="bulb_icon"/> </label> 
 

 
</div>

他們似乎無法點擊，而且我的懸停不工作。預先感謝您！

來源

2017-03-16 Khyana

您的輸入型收音機有顯示沒有，所以你不能在它 – Araz

，你也被賦予了圖像的背景懸停它不是因爲出圖像將覆蓋它 – Araz

@Araz關於圖像，我已經準備好圖像具有低容量。這仍然有效嗎？ – Khyana

您沒有正確使用'for'屬性內的值。它應該是元素，它指的ID

.button input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.button input[type=radio]:checked + label > img { 
 
    background: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png") no-repeat; 
 
} 
 

 
.button input[type=radio]:hover + label >img { 
 
    -webkit-transform: scale(1.3); 
 
    -ms-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
}

<div class="button"> 
 

 
    <input type="radio" id="but1" name="sel_button"> 
 
    <label for="but1"> 
 
    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png" alt="close_icon"/> 
 
    </label> 
 

 
    <input type="radio" id="but2" name="sel_button"> 
 
    <label for="but2"> 
 
    <img src="https://image.flaticon.com/icons/png/128/117/117944.png" alt="bulb_icon"/> 
 
    </label> 
 

 
</div>

來源

2017-03-16 14:19:29

Aww我忘了名字的敏感性。謝謝！！！ – Khyana

選中時單選按鈕變化圖像

回答

相關問題