单选按钮在选中时更改图像

Question

我想要发生的只是显示图像并且这些图像是 RADIO BUTTONS ，每次我选择或检查时我想要更改它的图像。< / p>

这样的事情：

到目前为止，这是我的代码。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

它们似乎无法点击，我的悬停也无法正常工作。 提前谢谢！

Answer 1

您没有正确使用'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>