Javascript 悬停时显示下一个元素

我试图展示下一次课堂测试的数据。例如，当我将鼠标悬停在第二个框上时，它应该显示第三个框等。
问题是第一个框在div中。使用next（）和children（）时，第二个框显示第三个框，但将鼠标悬停在第一个框上时，该框不起作用

$（'.box'）。悬停(
函数（）{
var元素=$（this.next（）.children（）；
text=element.attr（'data'）；
$（this.append（“”+text+“”）；
},
函数（）{
$（'#boxText'）。删除（）；
}
);
.test{
填充：75px；
背景：#eee；
浮动：左；
保证金：5px；
边框：实心1px#ddd；
光标：指针；
}
#文本框{
位置：绝对位置；
底部：-35px；
左：5px；
宽度：150px；
文本对齐：居中；
背景#45719B；
颜色：#FFF；
边框：实心1px#26445F；
字体系列：Arial、Helvetica、无衬线字体；
填充：5px0；
}
.盒子{
位置：相对位置；
浮动：左；
保证金：0；
填充：0；
}
也许是这样的


var$box=$（'.box'）；
$box.hover(
函数（）{
var$hoveredBox=$（此项）；
//在我们的悬停索引之后的索引处获取框
var$nextBox=$box.eq（$box.index（$hoveredBox）+1）；
如果（$nextBox.length）{
$hoveredBox.append（''+$nextBox.find（'.test'）.attr（'data'）+''）；
}
},
函数（）{
$（'#boxText'）。删除（）；
}
);
.test{
填充：75px；
背景：#eee；
浮动：左；
保证金：5px；
边框：实心1px#ddd；
光标：指针；
}
#文本框{
位置：绝对位置；
底部：-35px；
左：5px；
宽度：150px；
文本对齐：居中；
背景#45719B；
颜色：#FFF；
边框：实心1px#26445F；
字体系列：Arial、Helvetica、无衬线字体；
填充：5px0；
}
.盒子{
位置：相对位置；
浮动：左；
保证金：0；
填充：0；
}

这比我要发布的答案要简单，它将循环调用
.parent（）
，直到它得到一个下一个元素包含一个框。但是如果您附加到了错误的框中，您应该附加到
$（This）
，而不是
$nextBox
。