Jquery 悬停时显示div，模糊时隐藏

当单选按钮标签悬停时，我试图显示div

在html中

  <input id="hello" type="radio" name="greetings" value="hello">
  <label for="hello" id="hello-label">test</label>
  <input id="hi" type="radio" name="greetings" value="hi">
  <label for="i" id="hi-label">test</label>

  <div class="fields-div>
      <input id="f1" type="radio" name="fields" value="f1">
      <label for="f1" >test</label>
      <input id="f2" type="radio" name="fields" value="f2">
      <label for="f2" >test</label>
  </div>
...

在js中

$('#hello-label').hover(function() {
    $('.fields-div').css({'opacity': '1', 'visibility': 'visible'});
}
$('#hello-label').blur(function() {
    $('.fields-div').css({'opacity': '0', 'visibility': 'hidden'});
}

当用户悬停其中一个单选按钮时，它会显示一个关联的div，并且div保持打开状态，但当单选按钮不对焦时，div应该隐藏。但这部电视剧仍在上演。这里少了什么

您可以使用

.mouseenter（）

和

.mouseleave（）

描述：绑定鼠标进入元素时要激发的事件处理程序，或在元素上触发该处理程序

描述：绑定鼠标进入元素时要激发的事件处理程序，或在元素上触发该处理程序

$（“#hello标签”）.mouseenter（函数（）{
$（'.fields div'）.css({
“不透明度”：“1”，
“可见性”：“可见”
});
}).mouseleave（函数（）{
$（'.fields div'）.css({
“不透明度”：“0”，
“可见性”：“隐藏”
});
});
.fields div{
位置：绝对位置；
排名：0；
z指数：100；
不透明度：0；
可见性：隐藏；
}

测试
测试
测试
测试
为什么不使用纯css，如下所示：

#hello-label:hover ~ .fields-div {
    display: block;
}


.fields div{
位置：相对位置；
排名：0；
显示：无；
}
#hello标签：hover~.fields div{
显示：块；
}

测试
测试
测试
测试
您缺少一些右括号

您可以使用
toggleClass
来切换您的状态


$（'#hello标签'）。悬停（函数（）{
$（'.fields div'）.toggleClass（'toggle_show'）；
})
.fields div{
位置：绝对；顶部：0；
z指数：100；
不透明度：0；
可见性：隐藏；
}
{
不透明度：1；
能见度：可见；
}

测试
测试
测试
测试
你读过这本书了吗？您的函数将在鼠标进入时调用，在鼠标离开时再次调用。但是您可以将两个函数传递给它，一个用于mouseenter，另一个用于mouseleave。
.blur（）
事件与失去焦点的元素有关，这与鼠标移动无关。这就是它不起作用的原因。它应该在失去焦点时发生，以便fields div可以保留以启用选择其中一个字段。无论如何，谢谢。因为我必须单击“字段div”中的项目，但当我单击时，它会消失。这就是为什么我必须使用JQuery。不管怎样，谢谢。不客气！
#hello-label:hover ~ .fields-div {
    display: block;
}