title: Is there a pure CSS way to change checked radio button label's style when another label is hovered?
body: <p>I'm styling labels to take place of the standard browser-defined radio button controls. I have a <code>:hover</code> style and a <code>:checked</code> style for the labels.</p>
  
  <p>But it's not clear at a glance whether clicking a button will "uncheck" the currently-checked button. So I would like to change the style of the checked label when another label is hovered.</p>
  
  <p>I have coded an example (<a href="https://jsfiddle.net/e33e9bt9/" rel="nofollow noreferrer">JSFiddle</a>).</p>
  
  <p><strong>Current Behavior:</strong></p>
  
  <p>(My screenshot tool removed it, but the cursor is over Radio Button Three. Radio Button One is checked.)</p>
  
  <p><a href="https://i.stack.imgur.com/gwgXw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gwgXw.png" alt="enter image description here"></a></p>
  
  <p><strong>Desired Behavior:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/65oqP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/65oqP.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form type="post"&gt;
    &lt;input type="radio" name="group" id="radio1" /&gt; 
    &lt;label for="radio1"&gt;Radio Button One&lt;/label&gt;
  
    &lt;input type="radio" name="group" id="radio2" /&gt; 
    &lt;label for="radio2"&gt;Radio Button Two&lt;/label&gt;
  
    &lt;input type="radio" name="group" id="radio3" /&gt; 
    &lt;label for="radio3"&gt;Radio Button Three&lt;/label&gt;
  
    &lt;input type="radio" name="group" id="radio4" /&gt; 
    &lt;label for="radio4"&gt;Radio Button Four&lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>If I have to use JS, I will, but pure CSS is preferable.</p>