是否可以仅在使用 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

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

无论如何，您应该只在选中的按钮上设置 radioHover class，如下所示：

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

你有一些错别字和一些误解。 radioHover class 在 name 字段中，在 'no' 收音机的 class 中丢失。此外，您还有 2 个不同的 . 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>

Answer 3

没有必要使用jQuery来达到你想要的目标。把:hover伪class对准:checked伪class，在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>

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

Is it possible to display a tooltip only when hovered over a checked radio button using jQuery

html

javascript

css

jquery

radio-button