Question

我试图在单选按钮标签悬停时显示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>
...

在css中，

.fields-div {
    position: absolute; top: 0; 
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

在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应该被隐藏。但div仍在显示。这里缺少什么？

Answer 1

为什么你不使用纯css，像这样：

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

＆＃13;

.fields-div {
    position: relative;
    top: 0; 
    display: none;
}

#hello-label:hover ~ .fields-div {
    display: block;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用.mouseenter()和.mouseleave()

.mouseenter()

描述：绑定一个事件处理程序，当鼠标进入元素时触发，或触发元素上的处理程序。

.mouseleave()

描述：绑定一个事件处理程序，当鼠标进入元素时触发，或触发元素上的处理程序。

＆＃13;

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

＆＃13;

.fields-div {
  position: absolute;
  top: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

你错过了一些小括号
你可以使用toggleClass来切换你的状态。

＆＃13;

$('#hello-label').hover(function() {
  $('.fields-div').toggleClass('toggle_show');
})

＆＃13;

.fields-div {
  position: absolute; top: 0; 
  z-index: 100;
  opacity: 0;
  visibility: hidden;
}
.toggle_show{
  opacity: 1;
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

悬停时显示div并在模糊时隐藏

3 个答案: