jquery - 将鼠标悬停在变量上，显示下一个/最近的/对应的 div

Question

基本上我想要的是当我将鼠标悬停在 test 上时显示 ddd，当我将鼠标悬停在 test2 上时显示 ddd2。

但是现在当我将鼠标悬停在 test2 上时，它显示的是 ddd 而不是 ddd2。

    <div class="ugh">
    <div class="test">test</div>
</div>

    <div class="a">a</div>
<div class="f">    <div class="b">b</div></div>
    <div class="c">c</div>
<div class="dang">
    <div class="ddd">ddd</div>
</div>

<hr>

<div class="ugh">
    <div class="test">test2</div>
</div>



<div class="dang">
    <div class="ddd">ddd2</div>
</div>

抱歉，CSS 很乱

    $('.test').hover(mouseIn,mouseOut);

    function mouseIn() {
        var menuName = $('.ddd:first').show();
          //.....
    }
    function mouseOut() {
        var menuName = $('.ddd:first').hide();
          //.....
    }

var menuName = $('.ddd').hide();

<强> JS FIDDLE DEMO

Answer 1

请参阅this Fiddle 。这个 JS 将会为你工作。

$('.ddd').hide();
$('.test').mouseenter(function(){
    $(this).parent().nextAll('.dang').filter(':first').find('.ddd').show();
});
$('.test').mouseout(function(){
    $(this).parent().nextAll('.dang').filter(':first').find('.ddd').hide();
});