懸停時顯示下一個元素

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>