鼠标悬停在A上时显示B并在鼠标悬停时隐藏B？

Question

CSS：

<div class="aaa">aaa</div>
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div>


<hr>

<div class="aaa">aaa</div>
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div> 


<hr>

<div class="aaa">aaa</div>
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div>

我一直试图弄明白我该怎么做。我尝试了以下但是它没有意义，因为它从ccc而不是bbb中删除了hide类

    $(document).ready(function(){
    $(".aaa").on({
        mouseover: function(){
            $(this).nextAll('.bbb:first').addClass('hide');
        },
        mouseout: function(){
            $(this).nextAll('.ccc:first').removeClass('hide');    
        }
    });
});

MY JS FIDDLE

Answer 1

好吧，你告诉它在你写ccc时从$(this).nextAll('.ccc:first')删除了隐藏类。

你可能想要这样的东西：

$(".aaa").on({
    mouseover: function(){
        $(this).nextAll('.bbb:first').addClass('hide');
    }
});

$(".ccc").on({
    mouseover: function(){
        $(this).prevAll('.bbb:first').removeClass('hide');    
    }
});