懸停變量，顯示下一個/最接近/相應格

Question

基本上我想要的是當我懸停在測試顯示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(); 
}); 

Answer 2

我會建議使用data-*屬性來指定顯示哪些元素（這應該有一個id）。

例如...

HTML（修剪例如）

<div class="ugh"> 
    <div class="test" data-target="#ddd">test</div> 
</div> 

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

<div class="ugh"> 
    <div class="test" data-target="#ddd2">test2</div> 
</div> 

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

JAVASCRIPT

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

function mouseIn() { 
    var menuName = $($(this).data("target")).show(); 
} 

function mouseOut() { 
    var menuName = $('.ddd').hide(); 
} 

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

Here is a working example

Answer 3

工作實例

JSFIDDLE

$(document).ready(function() { 
$("#pp").hide(); 
$("#kk").hide();  
$("#t1_id").hover(
    function() { 
    $("#pp").toggle();  
}); 
$("#t2_id").hover(
    function() { 
    $("#kk").toggle();  
}); 
});