悬停时显示下一个元素

Question

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

 $('.box').hover( function() { var element = $(this).next().children(); text = element.attr('data'); $(this).append('<div id="boxText">' + text + '</div>'); }, function() { $('#boxText').remove(); } ); 

 .test { padding: 75px; background: #eee; float: left; margin: 5px; border: solid 1px #ddd; cursor: pointer; } #boxText { position: absolute; bottom: -35px; left: 5px; width: 150px; text-align: center; background: #45719B; color: #FFF; border: solid 1px #26445F; font-family: Arial, Helvetica, sans-serif; padding: 5px 0; } .box { position: relative; float: left; margin: 0; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <a class="box"> <span class="test" data="first"></span> </a> </div> </div> <a class="box"> <span class="test" data="second"></span> </a> <a class="box"> <span class="test" data="third"></span> </a> 

Answer 1

大概是这样吗？

 var $boxes = $('.box'); $boxes.hover( function(){ var $hoveredBox = $(this); //get the box at the index after our hovered index var $nextBox = $boxes.eq($boxes.index($hoveredBox) + 1); if ($nextBox.length) { $hoveredBox.append('<div id="boxText">'+ $nextBox.find('.test').attr('data') +'</div>'); } }, function(){ $('#boxText').remove(); } ); 

 .test{ padding:75px; background:#eee; float:left; margin:5px; border:solid 1px #ddd; cursor:pointer; } #boxText{ position:absolute; bottom:-35px; left:5px; width:150px; text-align:center; background:#45719B; color:#FFF; border:solid 1px #26445F; font-family:Arial, Helvetica, sans-serif; padding:5px 0; } .box{ position:relative; float:left; margin:0; padding:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <a class="box"> <span class="test" data="first"></span> </a> </div> </div> <a class="box"> <span class="test" data="second"></span> </a> <a class="box"> <span class="test" data="third"></span> </a>