JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<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;
}

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

JavaScript

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