悬停后悬停不更改其相关div

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((。 所以它是这样的。

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

这是我的工作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

我使用了类的索引，并显示了带有索引的链接内容。它准确地显示了我所期望的。

无论如何，谢谢大家。