当另一个标签悬停时，是否有一种纯CSS方式来更改已检查的单选按钮标签的样式？

Question

我将样式标签取代标准的浏览器定义的单选按钮控件。我有标签的:hover样式和:checked样式。

但一眼就看不清楚点击按钮是否会取消选中＆＃34;当前选中的按钮。所以我希望在另一个标签悬停时更改已检查标签的样式。

我编写了一个示例（JSFiddle）。

当前行为：

（我的截图工具将其删除，但光标位于单选按钮三上。单选按钮一。）

所需行为：

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>

CSS：

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

如果我必须使用JS，我会，但纯CSS更好。

Answer 1

除非所选元素是后代或相邻元素，否则由于级联性质，您将无法使用CSS执行此操作。但是，如果您的表单有一个已定义的边界框，您可以通过利用父级的hover状态来欺骗，例如：

IF :car_manufacturer IN ('A1, A2, A3') then :car_manufacturer else <error>

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

幸

Answer 2

假设Kodaloid是正确的，并且没有纯CSS解决方案，这里有一种方法可以用jQuery（JSFiddle）来实现这种效果。

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

为选中的标签添加其他类，使其变为粉红色：

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

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

$("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");
        }
    }
);