Question

这是为了在用户悬停单选按钮时显示其关联的Div，但在悬停进出后，div不会改变，显示当悬停回第一个单选按钮时的最后一个div。

In hmtl, 
    <input class="hide" id="test-1" type="radio" name="hello">
    <label for="test-1" class="greetings">Hello</label>
    <div class="content">The first div...</div>

    <input class="hide" id="test-2" type="radio" name="hello">
    <label for="test-2" class="greetings">Hi</label>
    <div class="content">The second div...</div>

In css, 
    .content {
        display: none;
    }

In JQuery, 
    $('.greetings').hover(function() {
        $(this).next('.content').css('display', 'block');
    });

当它从第一个到第二个悬停时它起作用，但相反，它只显示第二个内容。我怎样才能触发新的扳机？

Answer 1

尝试这样做，我必须验证是否可以触发next（）。所以就是这样......

UpdateTimestampsCache

，如果$('.greetings').hover(function() { var checkDiv = $(this).next('.content'); if(checkDiv){ checkDiv.css('display', 'block'); }else{ $(this).prev('.content').css('display', 'block'); } });不可用，则使用prev()。如果它能帮助您解决问题，请告诉我。

Answer 2

这是我的工作jsFiddle

我使用toggle方法在所选元素的hide（）和show（）之间切换。

$('.greetingsbox input').hover(function() {
    $(this).parent().find('.content').toggle();
});

 .greetingsbox{ float: left; width: 48%; }

.content {
  display: none;
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="greetingsbox">
      <input class="hide" id="test-1" type="radio" name="hello">
      <label for="test-1" class="greetings">Hello</label>
      <div class="content">The first div...</div>
    </div>
   <div class="greetingsbox">
      <input class="hide" id="test-2" type="radio" name="hi">
      <label for="test-2" class="greetings">Hi</label>
      <div class="content">The second div...</div>
    </div>

希望这会对你有所帮助:)。

Answer 3

我使用了类的索引并使用索引显示了链接的内容。它显示了我的预期。

无论如何，谢谢大家。

悬停后徘徊不改变其相关的div

3 个答案: