Html 如何更改悬停时的单选按钮背景图像

我有一个订阅计划，我想使用图像作为单选按钮背景。单击图像按钮后，背景图像应更改为另一个选中图像

我是这样做的

    <div class="text-center">
        <div class="hiddenradio">
        <label class="layersMenu">
        <input type="radio" id="radioZoom14" name="zoomsMBtiles" value="14" checked />
        <img src="/assets/img/plan-box-hover.png">
        
    </label>

    <label class="layersMenu">
        <input type="radio" id="radioZoom18" name="zoomsMBtiles" value="18" />
        <img src="/assets/img/plan-box-selected.png">
      
    </label>
    </div>

我无法更改背景图像。请帮忙。我有两张PNG图片

单选按钮：plan-box.png

---

悬停时：选中计划框。png

您不能将背景图像属性用于img标记

您可以使用jQuery或javascript更改img标记的src属性：

$("label.layersMenu").hover(
  function() {
    $(this).find("img").attr("src" , "img-address-2");
  }, function() {
    $(this).find("img").attr("src" , "img-address-1");
  }
);

---

您可以使用单选输入的以下属性控制单选按钮样式

input {
-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;}

然后您必须使用高度、宽度、边框、背景色等来获得所需的属性。下面是我的代码笔示例：

---

MDN参考：

您是否查看了悬停选择器？我要单选按钮检查谢谢！它在悬停状态下工作，但单击img-address-2后不工作。您也应该在单击事件时使用此功能：

input {
-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;}