没有必要使用jquery来实现您想要的目标。瞄准目标就足够了 :hover 在 :checked 伪类，在css中。这样地：

.radioHover:checked:hover ~ .displayContents {
    visibility: visible;
}

对于每个单选按钮的唯一内容，请使用id #radioYes 及 #radioNo 接线员 ~ .

$("#radioYes ~ .displayContents").text("Hello Yes");
$("#radioNo ~ .displayContents").text("Hello No");

.radioHover:checked:hover ~ .displayContents {
    visibility: visible;
}

.displayContents {
    visibility: hidden;
    background-color: white;
    border: 2px solid black;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 5px 0;
    width: 350px;
    /* border-spacing: 35px; */
    text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
    <div>
        <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" /><br />
        <div class="displayContents"></div>
        <span>Yes</span>
    </div>
    <div>
        <input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover" /><br />
        <div class="displayContents"></div>
        <span>No</span>
    </div>
</div>

首先，你把 radioHover 输入名称属性。
不管怎样，你应该设置 radioHover 仅在选中按钮上初始化，如下所示：

$("input[name='radioBtn']").hover(function () {
this.classList.toggle("radioHover", this.checked);
if($(this).is(':checked') == true){
var text= "Hello";
$(".displayContents").append(text);
}
});

.radioHover:hover ~ .displayContents{
    visibility: visible;
  }

.displayContents{
    visibility: hidden;
    background-color: white;
  border: 2px solid black;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 5px 0;
    width: 350px;
    /* border-spacing: 35px; */
    text-align: left;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
  <div>
    <input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
    <div class="displayContents"></div>
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn"/><br />
    <div class="displayContents"></div>
    <span>No</span>
  </div>
</div>

你有一些打字错误和误解。这个 radioHover 全班同学都在教室里 name 费尔德，因为“不”的广播而在课堂上失踪了。此外，您还有两个不同的 . displayContents 元素。指向与收音机相关的目标的方法是通过 .closest(selector).find(selector) 联合体。我认为您不想连续地附加相同的html，所以我将其更改为 .html() .
最后，我在混合中添加了“change”事件——这样，您可以在鼠标悬停和单击（如果选中）时获得值。原因是，单击该元素时，您将鼠标悬停在该元素上。然而，当状态从未检查变为已检查时，悬停没有更新。现在是了

$("input[name='radioBtn']").on('hover, change', function() {
  if ($(this).is(':checked')) {
    $(this).closest('div').find(".displayContents").html('Hello from ' + $(this).val());
  }
});

.radioHover:checked:hover~.displayContents {
  visibility: visible;
}

.displayContents {
  visibility: hidden;
  background-color: white;
  border: 2px solid black;
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  padding: 5px 0;
  width: 350px;
  /* border-spacing: 35px; */
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
  <div>
    <input type="radio" name="radioBtn" value="yes" id="radioYes" class="radioBtn radioHover" /><br />
    <div class="displayContents"></div>
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn" value="no" id="radioNo" class="radioBtn radioHover" /><br />
    <div class="displayContents"></div>
    <span>No</span>
  </div>
</div>