Html 是否有一种纯粹的CSS方法来更改选中单选按钮标签'；当另一个标签悬停时的样式？

我正在设计标签样式，以取代标准的浏览器定义的单选按钮控件。我有一个

：悬停

样式和一个

：选中的标签样式

但一眼就不清楚点击按钮是否会“取消”当前选中的按钮。因此，我想在另一个标签悬停时更改选中标签的样式

我编写了一个示例（）

当前行为：

<form type="post">
  <input type="radio" name="group" id="radio1" /> 
  <label for="radio1">Radio Button One</label>

  <input type="radio" name="group" id="radio2" /> 
  <label for="radio2">Radio Button Two</label>

  <input type="radio" name="group" id="radio3" /> 
  <label for="radio3">Radio Button Three</label>

  <input type="radio" name="group" id="radio4" /> 
  <label for="radio4">Radio Button Four</label>
</form>

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

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}

input[type="radio"]:checked + label.otherhover {
    background-color: pink;
}

$("input[type='radio'] + label").hover(
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").addClass("otherhover");
        }
    }, 
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").removeClass("otherhover");
        }
    }
);

（我的屏幕截图工具将其删除，但光标位于单选按钮3上。单选按钮1已选中。）


期望的行为：

<form type="post">
  <input type="radio" name="group" id="radio1" /> 
  <label for="radio1">Radio Button One</label>

  <input type="radio" name="group" id="radio2" /> 
  <label for="radio2">Radio Button Two</label>

  <input type="radio" name="group" id="radio3" /> 
  <label for="radio3">Radio Button Three</label>

  <input type="radio" name="group" id="radio4" /> 
  <label for="radio4">Radio Button Four</label>
</form>

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

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}

input[type="radio"]:checked + label.otherhover {
    background-color: pink;
}

$("input[type='radio'] + label").hover(
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").addClass("otherhover");
        }
    }, 
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").removeClass("otherhover");
        }
    }
);


HTML:

<form type="post">
  <input type="radio" name="group" id="radio1" /> 
  <label for="radio1">Radio Button One</label>

  <input type="radio" name="group" id="radio2" /> 
  <label for="radio2">Radio Button Two</label>

  <input type="radio" name="group" id="radio3" /> 
  <label for="radio3">Radio Button Three</label>

  <input type="radio" name="group" id="radio4" /> 
  <label for="radio4">Radio Button Four</label>
</form>

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

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}

input[type="radio"]:checked + label.otherhover {
    background-color: pink;
}

$("input[type='radio'] + label").hover(
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").addClass("otherhover");
        }
    }, 
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").removeClass("otherhover");
        }
    }
);

如果我必须使用JS，我会的，但是纯CSS更可取。
除非所选元素是后代或相邻元素，否则由于层叠的性质，使用CSS将很难做到这一点。但是，如果表单有一个已定义的边界框，则可以利用CSS的父级：hover状态进行欺骗，例如：

form:hover input[type="radio"]:checked + label {
  background-color: pink;
}

这是一个有点黑客，但它可能会给你想要的效果。我希望这有帮助

Koda
假设Kodaloid是正确的，并且没有纯CSS解决方案，下面是一种使用jQuery（）实现此效果的方法

我必须使用这个，因为我正在处理的表单在按钮之间有空格

为选中标签添加一个附加类，使其变成粉红色：

<form type="post">
  <input type="radio" name="group" id="radio1" /> 
  <label for="radio1">Radio Button One</label>

  <input type="radio" name="group" id="radio2" /> 
  <label for="radio2">Radio Button Two</label>

  <input type="radio" name="group" id="radio3" /> 
  <label for="radio3">Radio Button Three</label>

  <input type="radio" name="group" id="radio4" /> 
  <label for="radio4">Radio Button Four</label>
</form>

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

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}

input[type="radio"]:checked + label.otherhover {
    background-color: pink;
}

$("input[type='radio'] + label").hover(
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").addClass("otherhover");
        }
    }, 
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").removeClass("otherhover");
        }
    }
);

使用jQuery在适当的时间切换类：

<form type="post">
  <input type="radio" name="group" id="radio1" /> 
  <label for="radio1">Radio Button One</label>

  <input type="radio" name="group" id="radio2" /> 
  <label for="radio2">Radio Button Two</label>

  <input type="radio" name="group" id="radio3" /> 
  <label for="radio3">Radio Button Three</label>

  <input type="radio" name="group" id="radio4" /> 
  <label for="radio4">Radio Button Four</label>
</form>

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

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}

input[type="radio"]:checked + label.otherhover {
    background-color: pink;
}

$("input[type='radio'] + label").hover(
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").addClass("otherhover");
        }
    }, 
    function () {
        if (!$("#" + this.htmlFor).is(":checked")) {
            $("input[type='radio']:checked + label").removeClass("otherhover");
        }
    }
);

你需要什么类型的样式我不认为这在纯css中是可行的，但是JS解决方案应该是非常容易的，如果你想要的是任何一种样式的话for@Mohammedwahedkhan我只想更改
：checked
标签的背景色，可能会使其更亮，如示例屏幕截图中所示。标记为正确，因为这似乎是最接近我将得到没有JS。谢谢