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

基本上我想要的是当我将鼠标悬停在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>

---

我建议使用

数据-*

属性指定要显示的元素（应该有id）

例如

HTML（例如修剪过的）

---

我建议使用

data-*

属性指定要显示的元素（应该有id）

例如

HTML（例如修剪过的）

请参阅。这个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();
});

请看。这个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();
});

工作示例

工作示例

---

你的班名真的没用。尝试使用语义，尤其是当你请求他人帮助时。请检查给出的答案，它将帮助你找到解决方案。你的类名真的没有帮助。尝试使用语义，尤其是当您请求他人帮助时。请检查给出的答案，它将帮助您达成解决方案嗯，我认为我不能使用数据属性解决方案，因为它需要唯一的数据目标name@Newbie：只有

id

属性需要唯一，您可以有重复的

数据目标值。尽管您的示例表明每个
test
都只有一个
dang
，但我认为我不能使用数据属性解决方案，因为它需要唯一的数据目标name@Newbie：只有
id
属性需要唯一，您可以有重复的
数据目标值。尽管您的示例表明每个
test
都只有一个
dang
$('.test').hover(mouseIn, mouseOut);

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

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

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

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

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