是否可以仅在使用 jQuery 将鼠标悬停在选中的单选按钮上时显示工具提示

Question

我只想在我将鼠标悬停在选中的单选按钮上时显示工具提示。 当悬停在单选按钮上时，我正在尝试检查

$(this).is(':checked') == true

但只有将鼠标悬停在“是”时才会显示工具提示。我在这里做错了什么？ 任何建议都非常感谢。提前致谢。 :)

$("input[name^='radioBtn']").hover(function () {
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 radioHover" value="true" id="radioYes" class="radioBtn radioHover"/><br />
    <div class="displayContents"></div>
    <span>Yes</span>
  </div>
  <div>
    <input type="radio" name="radioBtn radioHover" value="true" id="radioNo" class="radioBtn"/><br />
    <div class="displayContents"></div>
    <span>No</span>
  </div>
</div>

Answer 1

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

.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>

Answer 2

首先，您将radioHover 放入name 属性中。

无论如何，您应该只在选中按钮上设置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>

Answer 3

你有一些错别字和一些误解。 radioHover 类在 name 字段中，在“否”收音机的类中缺失。此外，您还有 2 个不同的 . displayContents 元素。定位与无线电相关联的方法是通过.closest(selector).find(selector) 组合。我认为您并不想实际连续附加相同的 HTML，所以我将其更改为 .html()。

最后，我在组合中添加了“更改”事件 - 这样您就可以在悬停和点击时获得价值（如果选中）。原因是，当您单击它时，您将鼠标悬停在该元素上。然而，当状态从未选中变为选中时，悬停没有更新。现在可以了

$("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>