ホバリング後のホバリング関連するdivを変更しない

Question

ユーザーがラジオボタンをホバーしたときにホバリングしたり、ホバリングしたりすると、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'); 
    }); 

第1から第2までホバリングしたときに機能しますが、逆に2番目の内容のみを表示します。どうすれば新鮮なトリガーを発射できますか？

Answer 1

これを試して、next（）をトリガできるかどうかを検証する必要があります。それは

$('.greetings').hover(function() { 
      var checkDiv = $(this).next('.content'); 
      if(checkDiv){ 
     checkDiv.css('display', 'block'); 
    }else{ 
     $(this).prev('.content').css('display', 'block'); 
    } 
}); 

...このように書き、その後next()場合は利用できませんprev()を使用しました。 あなたの問題を助けてくれたら教えてください。

Answer 2

これは、私が選択した要素のために）非表示（）およびshow（間のトグルにtoggle方法を使用し、私の作業jsFiddle

です。これはあなたを助ける

$('.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

は、私はクラスのインデックスを使用してインデックスを持つリンクされたコンテンツを表示します。それは私が期待したものを正確に示しています。

とにかく、ありがとうございます。